JS阻止事件冒泡以及浏览器默认行为

crossea 发布于2019-08-22 10:46 / 1411人阅读

摘要：什么元素有默认行为呢如链接点我，提交按钮等的只会阻止默认行为，而则既阻止默认行为又防止对象冒泡阻止浏览器默认行为兼容

e的兼容

function fn(e){
    var event = e || window.event;
}

FireFox里的Event跟IE里的不同，IE里的是全局变量，随时可用。FireFox里的要用参数引导才能用，是运行时的临时变量
在IE/Opera中是window.event，在FireFox中是event。而事件的对象，在IE中是window.event.srcElement，在Firefox中是event.target，Opera中两者都可用

阻止事件冒泡

W3C的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true
stopPropagation是事件对象Event的一个方法，作用是阻止目标元素的冒泡事件，但是不会阻止默认行为
什么是冒泡事件？如在一个按钮是绑定一个click事件，那么click事件会依次在它的父级元素中被触发，stopPropagation就是阻止目标元素的事件冒泡到父级元素
了解更多请点这:理解DOM中的事件流
阻止事件冒泡兼容:

function stopPropagation(e) {
    var e = e || window.event;
    if ( e && e.stopPropagation ){
        e.stopPropagation();
    }else{
        e.cancelBubble = true;
    }
}

阻止浏览器默认行为

W3C的方法是e.preventDefault()，IE则是使用e.returnValue = false
preventDefault是事件对象Event的一个方法，作用是取消一个目标元素的默认行为。如果元素没有默认行为，调用无效。什么元素有默认行为呢？如链接点我，提交按钮等

return false:
JS的return false只会阻止默认行为，而jQuery则既阻止默认行为又防止对象冒泡
阻止浏览器默认行为兼容：

function stopDefault(e) {
    var e = e || window.event;
    if (e && e.preventDefault){
        e.preventDefault();
    }else{
        e.returnValue = false;
    }
    return false;
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91225.html

JS中的事件绑定，事件捕获，事件冒泡以及事件委托，兼容IE

摘要：事件阶段事件分为三个阶段事件捕获事件目标事件冒泡事件捕获和冒泡事件捕获事件发生时首先发生在上，然后依次传递给最后到达目的节点即事件目标。事件阶段事件分为三个阶段：事件捕获 --> 事件目标 --> 事件冒泡事件捕获和冒泡事件捕获：事件发生时（onclick,onmouseover……）首先发生在document上，然后依次传递给body、……最后到达目的节点（即事件...

taowen 2019-08-19 17:39 评论0 收藏0
JS基础入门篇（二十一）—事件流

摘要：事件绑定方式一用绑定事件方式二用进行事件侦听，也能起到绑定事件的作用。第一个参数事件名第二个参数解绑的函数名如果是匿名函数，无法解绑。一般使用有名函数传参。 1.事件绑定方式一：用on绑定事件 #box{ width:100px; height:100px; background-color:red; } ...

littleGrow 2019-08-29 15:40 评论0 收藏0
JS基础入门篇（二十一）—事件流

摘要：事件绑定方式一用绑定事件方式二用进行事件侦听，也能起到绑定事件的作用。第一个参数事件名第二个参数解绑的函数名如果是匿名函数，无法解绑。一般使用有名函数传参。 1.事件绑定方式一：用on绑定事件 #box{ width:100px; height:100px; background-color:red; } ...

shevy 2019-08-22 17:59 评论0 收藏0
JS基础入门篇（二十一）—事件流

摘要：事件绑定方式一用绑定事件方式二用进行事件侦听，也能起到绑定事件的作用。第一个参数事件名第二个参数解绑的函数名如果是匿名函数，无法解绑。一般使用有名函数传参。 1.事件绑定方式一：用on绑定事件 #box{ width:100px; height:100px; background-color:red; } ...

Salamander 2019-08-02 10:40 评论0 收藏0
彻底搞懂JS事件冒泡与捕获

摘要：事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流事件发生顺序的问题。如下假设三层都有事件监听，这时我们点击的小的蓝方框，事件执行的顺序是怎么样的呢红黄蓝事件冒泡微软提出了名为事件冒泡的事件流。事件冒泡与事件捕获事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。如下：假设三层div都...

Half 2019-08-02 15:29 评论0 收藏0