阻止ie、chrome中的事件冒泡和监听函数的覆盖问题

最新推荐文章于 2020-12-24 14:49:51 发布

aitai02286

最新推荐文章于 2020-12-24 14:49:51 发布

阅读量230

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/rellay/p/5230779.html

版权

记录学习JavaScript中遇到的知识点

1、目标实现<div id="wrapper"><input type="button" value="Click me." id="btn" /></div>中，单击div区域提示"这是div"，而单击btn按钮提示"这是input"。首先通过下面代码操作，实际运行结果发现：单击div区域显示正常，单击btn按钮显示也为“这是div”。由于单击btn时，同样触发了div区域，即先显示“这是input”后，立即显示了“这是div”，视觉上并没有发现。通过alert()测试，发现单击btn时，会先弹出‘1’后弹出‘2’。即JavaScript中的冒泡事件，先触发子容器监听事件，后触发父容器监听事件。

1 wrapper.οnclick=function(){
2     infoBox.innerHTML="你点击的是：div";
3     alert(1);
4 }
5 btn.οnclick=function(e){
6     infoBox.innerHTML="你点击的是：input";
7     alert(2);
8 }

View Code

2、阻止冒泡事件的方法：

（1、在ie中，通过设置event事件的cancelBubble属性为true现实。

（2、在Firefox中，通过调用event对象的stopPropagation方法实现。

以函数stopPropagation(e)封装阻止冒泡事件，实现ie、chrome的兼容：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>JavaScript Exercises.</title>
    <style>
    #infoBox{padding:5px;border:2px dashed #ccc;margin-bottom:10px;width:136px;height:20px;line-height:20px;text-align:center;    }
    #wrapper{padding:20px 0;background:black;width:150px;text-align:center;    }
    </style>
    </head>
    <body>
        <h1>阻止ie、chrome中的事件冒泡.</h1>
        <p id="infoBox"></p>
        <div id="wrapper">
            <input type="button" value="Click me." id="btn" />
        </div>
    </body>
</html>
<script tyoe="text/JavaScript">
//阻止事件冒泡
    function stopPropagation(e){
        e=window.event || e;
        if(document.all){//兼容ie
            e.cancelBubble=true;
        }
        else{//兼容Chrome、Firefox
            e.stopPropagation();
        }
    }
    var infoBox=document.getElementById("infoBox"),
        wrapper=document.getElementById("wrapper"),
        btn=document.getElementById("btn");
    wrapper.onclick=function(){
        infoBox.innerHTML="你点击的是：div";
        //alert(1);
    }
    btn.onclick=function(e){
        infoBox.innerHTML="你点击的是：input";
        //alert(2);
        stopPropagation(e);
    }
</script>

View Code

3、按钮btn的两个onclick函数，目的是两个监听事件均能能触发，在实现过程中如果都以btn.onclick()完成，则会出现仅触发了第二个监听函数，第一个则被覆盖。同样ie使用attachEvent方法，ie9+(两种方法均支持)、Firefox、Chrome则使用addEventListener方法为btn添加触发事件，且添加的事件不会覆盖已存在的事件。

以函数on(node,eventType,handler)封装node的触发事件，实现ie、chrome的兼容：

 1 <script tyoe="text/JavaScript">
 2 //为node添加触发事件
 3     function on(node,eventType,handler){
 4         node=typeof node=="string" ? document.getElementById(node) : node;
 5         if(document.all){
 6             node.attachEvent("on"+eventType,handler);
 7         }
 8         else{
 9             node.addEventListener(eventType,handler,false);
10         }
11     }
12     var btn=document.getElementById("btn");
13     on(btn,"click",function(){
14         alert(1);
15     });
16     on(btn,"click",function(){
17         alert(2);
18     });
19 </script>

View Code

4、对一个btn同时绑定onclick、onmousedown和onmouseup，单击时发现ie仅触发mousedown与mouseup，Chrome仅触发mousedown。

<script tyoe="text/JavaScript">
//为node添加触发事件
    function on(node,eventType,handler){
        node=typeof node=="string" ? document.getElementById(node) : node;
        if(document.all){
            node.attachEvent("on"+eventType,handler);
        }
        else{
            node.addEventListener(eventType,handler,false);
        }
    }
    var btn=document.getElementById("btn");
    on(btn,"click",function(){
        document.getElementById("infoBox").innerHTML=Math.round(Math.random()*10);
        if(document.all){
            alert(window.event.type);//IE下打印的事件对象名称
        }
        else{
            alert(event.type);
        }
    });    
    on(btn,"mousedown",function(){
        alert(event.type);
    });
    on(btn,"mouseup",function(){
        alert(event.type);
    });
</script>

View Code

onclick由onmousedown和onmouseup两部分组成：

（1、当对btn同时绑定onclick、onmousedown时，ie与Chrome都仅触发mousedown

（2、当对btn同时绑定onclick、onmouseup时，ie仅触发mouseup，chrome触发onclick与onmouseup

响应速度：down>up>click.

转载于:https://www.cnblogs.com/rellay/p/5230779.html

aitai02286

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
阻止ie、chrome中的事件冒泡和监听函数的覆盖问题

记录学习JavaScript中遇到的知识点1、目标实现<div id="wrapper"><input type="button" value="Click me." id="btn" /></div>中，单击div区域提示"这是div"，而单击btn按钮提示"这是input"。首先通过下面代码操作，实际运行结果发现：单击div区域显示正常，单击b...
复制链接

扫一扫