javascript - 带有 jquery 的 Onclick 处理程序

Question

我有以下代码

<div class="test-123">
   <p>Some Text</p>
   <div class="delete"></div>
   <div class="edit"></div>
</div>

问题是我必须为三个元素（ test-123、delete 和 edit ）设置 onclick jquery 处理程序。我面临以下问题。当我单击删除时，test-123 的 onclick 处理程序也会在删除的 onclick 处理程序完成后执行。

有没有办法以某种方式防止这种情况？

Answer 1

你正在寻找stopPropogation

event.stopPropagation()

http://api.jquery.com/event.stopPropagation/

$(function(){   
    $(".test-123").click(function(){
       alert("click on div"); 
    });      
    $(".delete,.edit").click(function(e){
       e.stopPropagation() 
       alert("click on Links"); 
    });    
});​

注释掉这一e.stopPropagation行，看看会发生什么。

工作演示：http: //jsfiddle.net/Pjn3s/2/

Answer 2

请参阅 jQuery 的event.stopPropagation. 这将防止其他侦听器触发。例如，

$("p").click(function(event){
  event.stopPropagation();
  // do something
});

Answer 3

正如@paislee 所说，传播存在问题。您是否使用 jQuery 方法“live”，例如：

$('selector').live('click', function(){
//The actions
});

我认为您应该检查“委托”方法的使用，该方法“强制”您为必须应用闭包的元素设置顶级父级。它比任何方式（甚至点击事件）都更安全。