只触发一次单击事件

Question

我只想在浏览器的屏幕宽度为800 at时才触发单击事件，但是根据下面的逻辑，当我到达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

就像皮特在评论中说的，你有不同的选择。

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

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