如何將事件綁定到元素的外部？

假設我們有框。在這個盒子裏是另一個盒子（box2）。我想在框中點擊鼠標時激活一個事件，但如果在box2上單擊它，我不想激活它。我怎樣才能做到這一點？我只想將事件綁定到box但排除box2。我做了一個測試用例：如何將事件綁定到元素的外部？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<script src="jquery-1.6.3.min.js"></script> 
<style> 
.box {width: 300px;height:150px;border:1px solid black;} 
.box2 {width: 10px;height:8px;border:1px solid red;z-index:2;} 
</style> 
<script> 
$(function() { 
    $('.box').click(function() { 
     alert('clicked'); 
    }); 
}); 
</script> 
</head> 
<body> 
<div class="box"><div class="box2"></div></div> 
</body> 
</html>

在這個測試案例中，我想在box2之外單擊鼠標時發出警報。不幸的是，無論光標處於什麼位置，它都會激活，所有它關心的是它是否在框內。那麼，如果在box2中單擊它，如何激活它，但是如果在box2（紅色框）上單擊它，卻不會激活它？

來源

2011-10-08 gadelat

「我只是想綁定事件到存儲箱」 ......事件冒泡的DOM，所以你將不得不綁定的事件BOX2爲好。只需在該事件處理程序中使用事件對象的stopPropagation方法即可。 –

補充一點：

$('.box2').click(function(e) { 
     e.stopPropagation(); 
    });

來源

2011-10-08 22:34:24

可以使2個clickhandlers，一個 '盒子'，一個用於 'BOX2'。使用box2的處理程序，您設置了一個變量'box2'，如果您單擊'box2'，則設置爲true。在'box'的clickhandler中檢查這個變量，它的工作原理！

以此爲JavaScript的

$(function() { 
    var box2 = false; 
    $('.box2').click(function() { 
     box2 = true; 
    }); 
    $('.box').click(function() { 
     if(!box2){ 
      alert('clicked'); 
     } 
    }); 
});

來源

2011-10-08 22:37:14 Tim

如何將事件綁定到元素的外部？

回答

相關問題