禁用父母jQuery的點擊事件

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

你要過濾的目標：

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

Answer 2

你必須從孩子停止事件傳播到父

試試

event.stopPropagation() 

爲孩子

Answer 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/

Answer 4

爲此目的使用event.stopPropagation()。

如果您不需要默認操作f.e.，請使用event.preventDefault（）。在點擊重定向標籤

Answer 5

綁定的情況下對孩子不能直接對文檔

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

Answer 6

請參閱本DEMO我剛剛創建。

簡而言之，我已使用event.stopPropagation()停止單擊事件冒泡到其父元素。它會阻止任何父處理程序被執行。

也爲了防止/取消只是默認操作，您通常應該使用event.preventDefault()而不是return false。