如何僅當事件按特定順序發生時觸發jquery事件處理程序？

我有以下情況。我在MarionetteJS上使用Bootstrap標籤。無論何時標籤點擊事件被觸發，我只想在爲此標籤觸發show.bs.tab事件後才調用我的處理程序。如果只有shown.bs.tab事件被觸發，我不想觸發我的處理程序，因爲有些情況下我通過調用tab（'show'）方法以編程方式顯示特定的選項卡。如何僅當事件按特定順序發生時觸發jquery事件處理程序？

以下事件序列點擊後，所以基本上只調用句柄 - > shown.bs.tab

我得到了它的工作方式如下：

var clicked = false; 
this.$el.on('click', 'a[data-toggle="tab"]', function(e) { 
    clicked = true; 
}); 

this.$el.on('shown.bs.tab', 'a[data-toggle="tab"]', function(e) { 
    if (clicked === true) { 
     var moduleId = $(this).attr("data-module"); 
     App.vent.trigger("resultTabClicked", { 
      module: moduleId 
     }); 
    } 
    clicked = false; 
});

這與優雅的解決方案相去甚遠，是否有更好的方法來實現這一目標？也許有承諾？

來源

2014-10-17 GMoney

我不知道MarionetteJS，但你爲什麼不能直接連接處理程序到'click'事件？ – Iazel 2014-10-17 00:07:55

如果你想避免全局變量，你可以附加數據到元素本身。

this.$el.on('click', 'a[data-toggle="tab"]', function(e) { 
    $(this).data('clicked', true); 
});

然後

if ($(this).data('clicked') === true) { 
    ... 
}

。數據（）是由路jQuery的方法，但你可以附加無論如何狀態你認爲合適

來源

2014-10-17 00:09:39 fromvega

這看起來更乾淨了，謝謝 – GMoney 2014-10-17 19:52:40

您可以附加handler到的事件和然後使用event.type和event.timeStamp來跟蹤事件發生的順序。在共同處理程序中，最後發生的最高事件爲timestamp;這應該有助於確定何時觸發正確的順序以激發所需的代碼。請參閱下面的概念驗證演示：

$(function() { 
 
    var times = {click:0,mouseenter:0,mouseleave:0}; 
 
    $('div.mydiv').on('mouseenter mouseleave click', function(e) { 
 
    times[e.type] = e.timeStamp; 
 
    $('div.out').text(JSON.stringify(times)); 
 
    }); 
 
});

div 
 
{ 
 
    padding: 20px; 
 
    margin: 10px; 
 
    border:1px solid #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mydiv">hover or click HIRE</div> 
 
<div class="out"></div>

來源

2014-10-17 00:34:53 PeterKA

如何僅當事件按特定順序發生時觸發jquery事件處理程序？

回答

相關問題