防止事件冒泡和阻止默认事件的兼容写法

本文介绍了一种兼容多种浏览器的方法来阻止事件的传播和冒泡。通过JavaScript实现的函数可以有效地在不同浏览器环境下(如IE和其他现代浏览器)进行事件处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

阻止事件的传播兼容

function(e){
            var e=e||window.event;
            e.stopPropagation();//阻止事件的传播(包括捕获也包括冒泡)

            // 兼容处理
            if (e.stopPropagation) {
                e.stopPropagation();
            }else{
                // IE浏览器
                e.cancelBubble=true;
            }

        }

防止事件冒泡

  //阻止冒泡事件的兼容性处理 
      function stopBubble(e) { 
        if(e && e.stopPropagation) { //非IE 
          e.stopPropagation(); 
        } else { //IE 
          window.event.cancelBubble = true; 
        } 
      } 
一、事件基础 1.事件函数 obj.on-事件名=fn 定义事件的时候,事件函数不会自动执行,当事件触发的时候,会执行 2.事件对象 1)事件对象:当浏览器执行事件的时候,会将所有与事件相关的内容(鼠标位置,触发的目标等)封装为一个对象,并且在触发事件的函数,在事件函数中进行传递 Event 常见属性: clientX clinetY 鼠标相对客户端的位置 pageX pageY 鼠标相对于页面的位置 type 事件类型 target 事件作用的节点对象 2)事件兼容性: 在低版本的IE火狐上,事件传递机制不一样,需要通过window.event来获取事件 window.event||e 二、事件绑定取消 1. 事件绑定 添加事件的做法,若出现为同一个节点绑定了同名的事件,会出现覆盖效果。 addEventListener(事件名,事件函数,isBubble) isBubble :默认为false 事件冒泡机制 true 事件为捕获机制 注意:事件名没有on前缀 removeEventListener(事件名,事件函数,isBubble) 注意:一定要保证移除事件添加事件时是同一个事件函数 事件绑定兼容性问题:在低版本IE中(IE 6/7/8)不支持addEventListenerremoveEventListener, 在低版本IE中可以使用: attachEvent(事件名,事件函数) 绑定事件 detachEvent 取消事件 注意:事件名 包含on前缀 两种事件绑定的区别: 1.addEventListener: 事件名没有on前缀 可以选择冒泡或者捕获机制 this 指事件调用者 同名事件的执行顺序:先添加先执行 2.attachEvent 事件名需要添加on前缀 不能选择冒泡或捕获的机制 this 指window对象 同名事件的执行顺序:后添加先执行 三、事件事件流:事件被触发之后会在DOM树的节点之间传递 冒泡事件由最具体的元素(事件的触发者),层层向外传递(传递给父节点),直到window 对象停止 捕获:事件由最外层元素(window),层层向内传递,直到最具体的元素 事件流机制有时候会对页面效果造成一些影响,所以需要拦截事件冒泡兼容写法: window.event?window.cancelBubble=true:e.stopPropagation() 四、拦截浏览器的默认行为 拦截浏览器自带的一些事件行为,例如:a超链接的跳转等.... 对象.事件名 return false 对象.addEventListener() e.preventDefault() 对象.attachEvent() e.returnValue=false; retrun false; 五、常见事件 右键事件:oncontextmenu 键盘事件:onkeydown onkeyup onkeypress 键盘事件的属性: key 在IE中不支持 键名称 keyCode 键码 滚轮事件: Onwheel 标准浏览器IE 对象.addEventListener(“DOMMouseScroll”,事件函数,false) 火狐 滚轮事件对: wheelDelta 标准浏览器IE 120 -120 下 120 上 detail 获取 3 六、事件的委托 事件委托:事件添加元素父节点(原理:事件冒泡机制) 将事件添加到父元素上,当事件发生时,父元素会找到对应触发事件的子元素去处理,后期添加的子元素,依然有这个事件
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值