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

谁践踏了优雅 2022-04-23 20:28 282阅读 0赞

#### 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中的事件流  
**阻止事件冒泡兼容**:

#### 阻止浏览器默认行为 ####

--------------------

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

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