JavaScript stopImmediatePropagation在事件处理程序中不起作用

Question

我想使用stopImmediatePropagation来阻止同一元素上的第二个（mousedown）hadler触发，但它不起作用。 代码示例：

 $(function() { var showEventsMessage = function(options) { options = $.extend({ eventType: 'CLICK', eventTarget: this, suffix: '<br>' }, options); var message = options.eventType + ': ' + (options.eventTarget.nodeName || 'unknown') + options.suffix; $('#Messages').append(message); } $('.clickable').click(function() { showEventsMessage.call(this, { eventType: event.type }); }).dblclick(function() { showEventsMessage.call(this, { eventType: event.type }); }).mousedown(function() { showEventsMessage.call(this, { eventType: event.type }); event.stopImmediatePropagation(); event.preventDefault(); }).mousedown(function() { showEventsMessage.call(this, { eventType: event.type, suffix: '#2<br>' }); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='clickable'>CLICK HERE ... <p class='clickable'>or here!</p> </div> <div id="Messages"></div> 

但是，如果我向调用stopImmediatePropagation的事件处理程序添加一个事件参数（在代码中看到“添加了ARGUMENT HERE”的行），它确实有效！ 由于事件是一个全球性的对象，这怎么可能，我不明白有效的变化......！ 代码示例：

 $(function() { var showEventsMessage = function(options) { options = $.extend({ eventType: 'CLICK', eventTarget: this, suffix: '<br>' }, options); var message = options.eventType + ': ' + (options.eventTarget.nodeName || 'unknown') + options.suffix; $('#Messages').append(message); } $('.clickable').click(function() { showEventsMessage.call(this, { eventType: event.type }); }).dblclick(function() { showEventsMessage.call(this, { eventType: event.type }); }).mousedown(function(event) /* ARGUMENT ADDED HERE */ { showEventsMessage.call(this, { eventType: event.type }); event.stopImmediatePropagation(); event.preventDefault(); }).mousedown(function() { showEventsMessage.call(this, { eventType: event.type, suffix: '#2<br>' }); }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='clickable'>CLICK HERE ... <p class='clickable'>or here!</p> </div> <div id="Messages"></div> 

Answer 1

不同之处在于参数是jQuery事件对象，没有参数它使用原始的JS事件对象。 您获得了jQuery版本，因为您使用jQuery初始化事件处理程序。

您尝试调用“stopImmediatePropagation”的函数是一个jQuery函数，并未在原始JS事件中定义，这就是为什么它不起作用的原因。

Answer 2

请注意，在这两种情况下都添加了jQuery事件处理程序 。

在第一种情况下，您试图通过在全局（本机JS）事件上调用stopImmediatePropagation来停止执行jQuery处理程序。 因此，它不起作用。

从参数中提取event时，您在stopImmediatePropagation上调用jQuery.Event 。 因此，它成功地停止了jQuery处理程序的执行。

Answer 3

实际上， stopImmediatePropagation是一个jquery方法。 通过在mousedown事件回调中传递event ，它传递jquery引用，然后使用它调用stopImmediatePropagation并且工作，但是当你没有传递event参数时，它指向默认的javascript事件对象，它没有引用stopImmediatePropagation 。 所以，它在那里不起作用
请参阅： 事件处理功能内部