防止含有元素時，子元素上點擊

我所有的元素絕對定位
ITEM2的執行事件包含在物品1
當我點擊ITEM2，默認行爲是執行的ITEM2，然後點擊點擊項目1
我可以以某種方式阻止任何在item1上執行的動作，當我點擊item2時？

我的小提琴：

HTML

<div class="item1"> 
    item1 
</div> 
<div class="item2"> 
    item2 
</div> 
<div class="item3"> 
    item3 
</div>

CSS：

item1 { 
    position:absolute; 
    width:150px; 
    height:150px; 
    background-color:red; 
    top:5%; 
} 

.item3, .item2 { 
    position:absolute; 
    width:50px; 
    height:50px; 
    background-color:green; 
    top:8%; 
    left:1%; 
    display:none; 
} 

.item3 { 
    top:18%; 
}

JS：

var item1 = $(".item1"); 
var item2 = $(".item2"); 
var item3 = $(".item3"); 

item1.hover(
    function() { 
     item2.show(); 
     item3.show(); 
    }, 
    function() { 
     item2.hide(); 
     item3.hide(); 
    } 

); 

item2.hover(
    function() { 
     item3.hide(); 
    }, 
    function() { 
    } 

); 

item2.click(
    function() { 
     alert("Perform some function"); 
    } 
); 

item1.click(
    function() { 
     alert("Perform item1 function"); 
    } 
);

來源

2013-02-22 gaurav jain

的http：//的jsfiddle。 net/z9Unk/60/- > e.stopPropagation（） – banzomaikaka 2013-02-22 02:05:57

which is preferren e.stop（）or return false ???非常感謝 – 2013-02-22 02:08:06

返回false似乎做我想要的東西... e.stopPropagatio（）沒有...讓我測試更多 – 2013-02-22 02:11:44

簡單地返回false：

item2.click(
    function() { 
     alert("Perform some function"); 
     return false; 
    } 
); 

item1.click(
    function() { 
     alert("Perform item1 function"); 
     return false; 
    } 
);

閱讀：What does "return false;" do?

來源

2013-02-22 02:03:32 gdoron

可以向上冒泡DOM樹，阻止任何父處理程序被通知的阻止事件事件。

DOM Level 3的活動：stopPropagation

IE6-8您可以在事件處理程序添加return false或window.event.cancelBubble = true如果你使用jquery

，可以在所有瀏覽器中使用event.stopPropagation

來源

2013-02-22 02:12:29 anhulife

防止含有元素時，子元素上點擊

回答

相關問題