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

【问题标题】：JavaScript stopImmediatePropagation not working in event handlerJavaScript stopImmediatePropagation 在事件处理程序中不起作用
【发布时间】：2018-06-15 08:27:27
【问题描述】：

我想使用 stopImmediatePropagation 来防止同一元素上的第二个（鼠标按下）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 的事件处理程序添加一个 event 参数（在代码中参见“ARGUMENT ADDED HERE”行），它确实有效！由于 event 是一个全局对象，这怎么可能，我不明白什么有效地改变了......！？代码示例：

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

【问题讨论】：

Firefox doesn't define window.event。你用的是什么浏览器？
Chrome、Opera、Edge 和 IE 都在事件监听器执行时定义 window.event。

标签： javascript event-handling

【解决方案1】：

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

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

【讨论】：

^ 这不是真的！ developer.mozilla.org/en-US/docs/Web/API/Event/…

【解决方案2】：

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

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

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

【讨论】：

抱歉，这只是@Joost_96 答案的改写。自从他第一次发布以来，他应该得到同样的赞誉
很公平@TarunLalwani。当我打开这个问题时，没有答案，所以我发布了这个答案。
有时会发生，您应该确保在发布答案之前刷新页面。这有助于避免这种情况
当然。下次会注意的。

【解决方案3】：

其实stopImmediatePropagation是一个jquery方法。通过在mousedown 事件回调中传递event，它传递jquery 引用，然后用它调用stopImmediatePropagation 并工作，但是当你不传递event 参数时，它指向默认的javascript 事件对象，它不参考stopImmediatePropagation。所以，它在那里不起作用
见：Inside the Event Handling Function

【讨论】：