只觸發一次點擊事件

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

一種可能的方法是在不再需要使用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 在評論中所說，您有不同的選擇。

您可以使用 boolean 來跟蹤事件是否已被觸發：

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

您也可以使用one function 進行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");
});