Question

我只想在浏览器的屏幕宽度为800px时触发click事件，但是根据以下逻辑，当我到达800并停止调整屏幕大小时，click事件会不停地来回触发。我该如何解决这个问题。

html文件：

<!-- begin sidebar minify button -->
<a href="javascript:;" class="sidebar-minify-btn" data-click="sidebar-minify">
   <i class="fa fa-angle-left"></i>
</a>
<!-- end sidebar minify button -->

js文件：


window.onresize = function()
{
     const width = window.innerWidth;
     if(width === 800)
     {

        $('a[data-click="sidebar-minify"]').trigger('click');
        console.log('click event triggered');
     }
}

Answer 1

一种可能的方法是在不再需要使用EventTarget.removeEventListener()时删除resize侦听器，如下所示：

function resizeListener() {
  if (window.innerWidth === 800) {
    window.removeEventListener('resize', resizeListener);
    $('a[data-click="sidebar-minify"]').trigger('click');
    console.log('click event triggered');
  }
}

window.addEventListener('resize', resizeListener);

Answer 2

window.onresize = function()
{
 const width = window.innerWidth;
 if(width === 800)
 {
   // give anker link class then remove that after condition true


    $('.anker').trigger('click');


    console.log('click event triggered');

   $('a[data-click="sidebar-minify"]').removeClass("anker");
 }
}

Answer 3

就像@Pete在评论中所说，您有不同的选择。

您可以使用布尔值来跟踪事件是否已经触发：

var isResized = false;
window.onresize = function()
{
     const width = window.innerWidth;
     if(width === 800 && !isResized)
     {
        isResized = true;
        alert("test");
     }
}

您还可以使用one函数来单击a tag，在第一次使用后将其取消绑定：

window.onresize = function()
{
     const width = window.innerWidth;
     if(width === 800)
     {
        $('a[data-click="sidebar-minify"]').trigger('click');
        console.log('click event triggered');
     }
}

$('a[data-click="sidebar-minify"]').one("click", function(){
    alert("test");
});

仅触发一次点击事件

3 个答案: