如何仅在事件按特定顺序发生时触发jquery事件处理程序

How to trigger jquery event handler only if events happened in a specific order?

本文关键字：jquery 程序 事件处理 顺序发生 何仅 事件      更新时间：2023-09-26

我有以下情况。我在MarionetteJS中使用Bootstrap选项卡。每当触发选项卡单击事件时，我只想在为该选项卡触发show.bs.tab事件后调用我的处理程序。如果只触发shown.bs.tab事件，我不想触发我的处理过程，因为有时我会通过调用tab（"ow"）方法以编程方式显示特定的选项卡。

所以基本上只调用处理程序后的事件click->show.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;
});

这与优雅的解决方案相去甚远，有更好的方法来实现这一点吗？也许有承诺？

如果想要避免全局变量，可以将数据附加到元素本身。

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

然后

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

.data（）是一个jQuery方法，但您可以附加任何您认为合适的状态

您可以将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>

相关文章：