Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

您尝试呼叫的功能＆＃34; stopImmediatePropagation＆＃34;是一个jQuery函数，并没有在原始的JS事件中定义，这就是它不能工作的原因。

Answer 2

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

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

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

Answer 3

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

JavaScript stopImmediatePropagation在事件处理程序

3 个答案: