Question

<div id="outerDiv" onclick="javascript:addEvent()">
    <div id="inner">
        <a class='editEV' href="javascript:void(0)">event1</a>//*added dynamically from addEvent method.*
    </div>
 </div>

我的脚本是：

$('#inner').on('click','.editEV',function(){
    editEvent();
});

当我点击首先调用的锚addEvent()然后editEvent()时，但我希望当我点击div时，addEvent（）应该调用，当我点击锚点然后editEvent。< / p>

我知道冒泡，这就是为什么我引入一个内部静态div来绑定监听器，但仍然addEvent()首先调用。我无法弄清楚如何强行首先致电editEvent。

Answer 1

您正在使用 - 内联事件集（onclick = ..）和Jquery 。选择其中一个以获得更清晰的代码。我会选择jquery on ，这个问题的解决方案是创建两个事件 - 一个在div上，第二个在edit元素上，但在第二个我们需要使用e.stopPropagation方法停止冒泡。这里有完整的工作示例：

$(function(){

  $("#outerDiv").on("click",function(e){
  
      console.log("Add click");

  }); 
  
  $("#outerDiv").on("click",".editEV",function(e){
  
      console.log("Edit click");
      e.stopPropagation();//very important to stop propagate event

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outerDiv" style="padding:20px; background:grey;">
    <div id="inner">
        <a class='editEV' >event1</a>
    </div>
 </div>

如果没有stopPropagation，我们的事件将进入div并运行其事件，stopPropagation会避免将事件传播到上层元素。

Answer 2

如果您不想更改代码，也可以使用此功能。

$(function(){

$("#outerDiv").on("click",function(e){

  addEvent();

}); 

$("#outerDiv").on("click",".editEV",function(e){

  editEvent();
  e.stopPropagation();

});

});

Answer 3

e.stopPropagation();

使用它。
如果您想了解更多.stopPropagation（），look here。

我怎样才能强制首先调用动态添加的元素s onclick（）

3 个答案: