仅当事件以特定顺序发生时，才如何触发jquery事件处理程序？

Question

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

因此，基本上只有在以下事件序列之后，才单击调用处理程序-> 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;
});

这与优雅的解决方案相去甚远，是否有更好的方法来实现这一目标？ 也许有诺言？

Answer 1

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

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

接着

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

顺便说一句，.data（）是一个jQuery方法，但是您可以以自己认为合适的方式附加状态

Answer 2

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