解决/阻止 div层内的div层点击事件冒泡触发的小方法

起因

       有天,同事问我,有一个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);



       这也算是因为认真读书解决了一个实际遇到的问题吧。写个博客记录一下。  


附件

       示例代码:点击打开链接

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值