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

Question

我想使用 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>

Answer 1

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

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