起因
有天,同事问我,有一个div层'out',内含有一个div层'in'。如下:
两个层都绑定了点击事件,但是点击in层的时候,同时也会触发out层的点击事件。但是他并不希望触发out的点击事件,只希望触发in层的点击事件,问我怎么处理。页面代码:
<div style="width: 400px;height: 400px;background-color: #678678;font:3em bold;" id="outDiv">
out
<div style="width: 200px;height: 200px;margin: 50px;background-color: #eaceac;font:1em bold;" id="inDiv">in</div>
</div>
权宜之计
当时正在忙,也没细想解决方法。当然,以前也没写过类似的代码,就只好用了一个很笨的办法,用了一个简单的全局变量,来记录是点击的in层还是out层,然后就解决了这个问题了。代码如下:
var clickDiv = 'out';
inDiv.addEventListener('click',function(e){
clickDiv = 'in';
alert('in');
},false);
outDiv.addEventListener('click',function(e){
if(clickDiv == 'out')
alert('out');
clickDiv = 'out'
},false);
而且当时就随手写,根本没用addEventLinstener来绑事件,点击事件直接写在div的οnclick=""里面,外面定义了两个点击function。
解决
当然,当时就知道,这个解决方案很有问题。但是当时问题有点急,就随手这样解决了,看起来也没出现什么bug。只是代码非常的不优雅。直到今天,读到了《基于MVC的JavaScript Web富应用开发》中的第二章,关于如何取消事件冒泡的方法。才算是比较靠谱的解决了这个问题,代码如下:
inDiv.addEventListener('click',function(e){
alert('in');
e.stopPropagation();//终止事件冒泡
},false);
outDiv.addEventListener('click',function(e){
alert('out');
},false);
这也算是因为认真读书解决了一个实际遇到的问题吧。写个博客记录一下。
附件
示例代码:点击打开链接