Question

我有以下情况。我在MarionetteJS上使用Bootstrap选项卡。每当触发选项卡单击事件时，我只想在为此选项卡触发show.bs.tab事件后调用我的处理程序。如果只触发了shows.bs.tab事件，我不想解雇我的处理程序，因为我偶尔通过调用tab（＆＃39; show＆＃39;）方法以编程方式显示特定的选项卡。

所以基本上只有在以下事件序列之后调用处理程序 click - ＆gt; 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的事件最后发生;这应该有助于确定您何时触发正确的订单以便触发所需的代码。请参阅下面的概念验证演示：

＆＃13;

$(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 ) );
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果事件以特定顺序发生，如何触发jquery事件处理程序？

2 个答案: