如何将事件绑定到元素的外部？

假设我们有框。在这个盒子里是另一个盒子（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

如何将事件绑定到元素的外部？

回答

相关问题