如何仅当事件按特定顺序发生时触发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事件处理程序？

回答

相关问题