阻止事件冒泡

最新推荐文章于 2024-05-12 21:38:39 发布

csdncsdn9876

最新推荐文章于 2024-05-12 21:38:39 发布

阅读量341

点赞数

分类专栏： javascript 文章标签： javascript 事件冒泡

本文链接：https://blog.youkuaiyun.com/csdncsdn9876/article/details/51588091

版权

javascript 专栏收录该内容

29 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>跨浏览器解决方法</title>
</head>

<body>
   <div id="box">
          <input type="button" value="btn" id="btn"/>
    </div>
    <script>
       function showMessage(event){
           alert(event.target.nodeName);
           event.stopPropagation();
       }
       function showBox(){
           alert("hello world");
       }
       var btn = document.getElementById("btn");
       var box = document.getElementById("box");
       var eventUtil = {
           //添加句柄
           addHandler:function(element,type,handler){//element:被操作的元素；type:是什么事件；handler:进行什么操作
               if(element.addEventListener){
                   element.addEventListener(type,handler,false);//DOM 2级
               }else if(element.attachEvent){
                   element.attachEvent("on"+type,handler);//IE事件
               }else{
                   element["on"+type]=handler;//0级
               }
           },
           //删除句柄
           removeHandler:function(element,type,handler){//element:被操作的元素；type:是什么事件；handler:进行什么操作
               if(element.removeEventListener){
                   element.removeEventListener(type,handler,false);//DOM 2级
               }else if(element.detachEvent){
                   element.detachEvent("on"+type,handler);//IE事件
               }else{
                   element["on"+type]=null;//0级
               }
           }
       }
       eventUtil.addHandler(btn,'click',showMessage);//在IE 和其他浏览器中均可以显示
       eventUtil.addHandler(box,'click',showBox);
    </script>
</body>

</html>