在父jquery上禁用click事件

Question

我有一个用PHp和jQuery开发的网站。 我在绝对位置的另一个图像上有一个图像。 小图片有事件点击，其父图标有另一个事件点击。但是当我点击小图片时，我不希望父母的事件被触发 例：

如果我单击“确定”图像，则点击父火灾事件，我有两个动作，一个来自“ok”图像，另一个来自父级。

我尝试过这种模式：

$(document).on('click','.social-like',function(event){
   //click on "ok" image
   event.preventDefault();
});
$(document).on('click','.block-shirt',function(){
  //click on rectangle
});

CSS：

.block-shirt{
    float:left;
    width:133px;
    height:170px;
}
.tee{
    position:absolute;
    top:0;
    left:15px;
    margin-top:5px;
    width:103px;
    z-index:5;
}
.social-like{
    position:absolute;
    bottom:10px;
    right:20px;
    z-index:10;
    width:24px;
    height:32px;
}

HTML：

<div class="block-shirt">
   <img src="rectangle.png" class="tee"/>
   <div class="social-like"></div>
</div>

Answer 1

使用

$('.block-shirt').click(function(e){
  if ($(e.target).is('.social-like'))
        return false; // do what you want
  else
        //.block-shirt clicked code

来自：http://forum.jquery.com/topic/click-events-on-absolute-positioned-elements

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

Answer 2

您必须过滤目标：

$(document).on('click','.block-shirt',function(e){
    if($(e.target).is('.social-like')) return;
    //else do some stuff
});

Answer 3

您必须停止将事件从子级传播到父级

尝试

event.stopPropagation()

为孩子

Answer 4

为此目的，请使用event.stopPropagation()。

如果您不想要默认操作f.e，请使用event.preventDefault（）。重定向点击标签

Answer 5

直接将事件绑定到孩子而不是文档

$('.social-like').on("click",function(e){e.stopPropagation()})

Answer 6

请参阅我刚创建的DEMO。

简而言之，我使用event.stopPropagation()来阻止click事件冒泡到其父元素。它将阻止任何父处理程序被执行。

还要阻止/取消默认操作，通常应使用event.preventDefault()而不是return false。