阻止事件的默认行为

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

原创最新推荐文章于 2024-05-12 21:38:39 发布 · 348 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #阻止事件 #默认行为

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"/>
          <a href="demo06.html" id="a">跳转</a>
    </div>
    <script>
       function showMessage(event){
           alert(event.target.nodeName);
           event.stopPropagation();
       }
       function showBox(){
           alert("hello world");
       }
       function showA(event){
           event.stopPropagation();
           event.preventDefault();
       }
       var btn = document.getElementById("btn");
       var box = document.getElementById("box");
       var a = document.getElementById("a");
       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);
       eventUtil.addHandler(a,'click',showA);
    </script>
</body>

</html>