0

我有一个用 PHP 和 jQuery 开发的网站。我在绝对位置的另一个图像上有一个图像。小图像有事件点击，它的父有另一个事件点击。但是当我单击小图像时，我不希望触发父事件示例： 在此处输入图像描述

如果我单击“确定”图像，则父触发事件单击并且我有两个动作，一个来自“确定”图像，另一个来自父图像。

我尝试过这种模式：

$(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>
4

6 回答 6

3

利用

$('.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/

于 2013-05-27T13:02:17.790 回答
2

您必须过滤目标：

$(document).on('click','.block-shirt',function(e){
    if($(e.target).is('.social-like')) return;
    //else do some stuff
});
于 2013-05-27T13:02:30.350 回答
1

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

尝试

event.stopPropagation()

为孩子

于 2013-05-27T13:00:31.910 回答
1

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

$('.social-like').on("click",function(e){e.stopPropagation()})
于 2013-05-27T13:07:32.760 回答
1

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

如果您不想在点击标签时重定向默认操作，请使用 event.preventDefault()

于 2013-05-27T13:02:44.660 回答
1

请参考我刚刚创建的这个DEMO 。

简而言之，我曾经event.stopPropagation()停止将点击事件冒泡到其父元素。它将阻止执行任何父处理程序。

也为了防止/取消默认操作，您通常应该使用event.preventDefault()而不是return false.

于 2013-05-27T13:22:54.063 回答