只触发一次点击事件

Question

我只想在浏览器的屏幕宽度为 800 像素时触发点击事件，但是按照下面的逻辑，当我到达 800 并停止调整屏幕大小时，点击事件会不停地来回触发。我该如何解决这个问题。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

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

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

就像@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");

});

Answer 3

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");

 }

}