javascript 事件冒泡處理方式
阿新 • • 發佈:2018-11-04
在工作中遇到 javascript 冒泡的情況,特此記錄一下。我們要實現點選包含此課程vip上面的區域進行關閉視窗也就是div的隱藏,點選 包含此課程vip 以下的區域不進行關閉視窗,實際效果是下面的點選也會關閉視窗。
下圖是html頁面結構的程式碼, 其中我們在在class 為vip-popoutshade 樣式上新增一個點選事件進行將該div 進行隱藏,預設的情況下 vip-popoutcon也是有點選隱藏的事件的也就是該事件會向下傳遞。但是我們不想在vip-popoutcon 上新增點選隱藏事件。
解決方案:在class 為vip-popoutcon 的click上執行 event.stopPropagation 阻止事件冒泡
//點選隱藏
$(".vip-popoutshade").click(function(){
$(this).hide();
$(".vip-popoutcon").show();
$(".base").show();
})
//阻止事件冒泡
$(".vip-popoutcon").click(function(event) {
event.stopPropagation();
});
也可以在class 為vip-popoutcon的div click事件中直接retrun false 也可以阻止事件冒泡
//阻止事件冒泡 $(".vip-popoutcon").click(function(event) { //event.stopPropagation(); return false; });