javascript - jQuery.on() 无法与 stopPropagation 一起使用

Question

当我单击内部 div 时，我想停止func()执行。

这是html：

    <div onclick="func()">
       <div id="inner-div">
          I'm an inner div
       </div>
     </div>

此代码将停止传播：

$('#inner-div').bind("click", function(e){
  e.stopPropagation();
})

此代码无法停止传播：

$(document).on("click", '#inner-div' , function(e){
  e.stopPropagation();
})

我该怎么做？

Answer 1

停止从委托处理程序传播将不起作用，因为事件已经传播到文档树上以便该委托处理程序运行。

文档中提到了这一点：

由于该.live()方法在事件传播到文档顶部后处理事件，因此无法停止实时事件的传播。

on()并且delegate()行为与此上下文中的相同live()，只是使用祖先元素而不是文档本身。在所有情况下，阻止事件从目标元素传播为时已晚。

Answer 2

为了解决它，你可以这样做：

<div onclick="func(event, this)">
   <div id="inner-div">
      I'm an inner div
   </div>
 </div>

JS

function func(e, that) {
    if (e.target === that) {
        // do stuff
    }
}

小提琴

或使用 jQuery 并删除内联处理程序（因为问题标记为 jQuery）

<div id="parent">
   <div id="inner-div">
      I'm an inner div
   </div>
 </div>

JS

$(document).on('click', '#parent', function(e) {
    if (e.target === this) {
        // do stuff
    }
});

小提琴