防止兒童從父母射擊的點擊事件

Question

考慮下面的代碼片段：

<div class="div-outer"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    <div class="div-inner" style="background:red"> 
     Curabitur hendrerit vehicula erat, ut gravida orci luctus vitae. 
    </div> 
</div> 

現在假設外div有一個與之相關的實時click。我如何確保在我click內部div的任何位置都沒有觸發？

編輯：

這裏是JS的要求

$(".div-outer").live("click",function(){alert("hi")}); 

的 「.inner-DIV」

Answer 1

點擊時，這不應被triggereed你有一個事件監聽器添加到內孩子並取消事件的傳播。

在純JS像

document.getElementById('inner').addEventListner('click',function (e){ 
    e.stopPropagation(); 
}); 

就足夠了。需要注意的是jQuery provides the same facility：

$(".inner-div").click(function(event){ 
    event.stopPropagation(); 
}); 

或

$(".inner-inner").on('click',function(event){ 
    event.stopPropagation(); 
}); 

Answer 2

你可以做到這一點通過在內部的div添加一個點擊事件，並使用兩種return false;或event.stopPropagation();

$(".div-inner").click(function(){ 

    return false; 
}) 

或

$(".div-inner").click(function(event){ 

    event.stopPropagation(); 
}) 

Answer 3

創建新click偵聽器內的div和調用event.stopPropagation()在新的事件。在你的js

像

$('div-outer').on('click','div-inner',function(e){ 
    e.stopPropagation(); 
}); 

Answer 4

使用stopPropagation文件

$(".eventclick").click(function(e) { 
    e.stopPropagation(); 
});