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

停止委托处理程序的传播将无法正常工作，因为事件已将已传播到文档树中，以便运行该委派处理程序。

documentation：

中提到了这一点

  

由于.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
    }
}

FIDDLE

或使用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
    }
});

FIDDLE