JS-阻止冒泡事件与事件委托

JavaScript011

JS-阻止冒泡事件与事件委托,第1张

事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点。

1.标准写法:利用事件对象里面的 stopPropagation()方法

e.stopPropagation()

2.非标准写法:IE 6-8 利用事件对象 cancelBubble 属性

e.cancelBubble = true

事件委托也称为事件代理, 在 jQuery 里面称为事件委派。 不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。

如:给 ul 注册点击事件,然后利用事件对象的 target 来找到当前点击的 li,因为点击 li,事件会冒泡到 ul 上,ul 有注册事件,就会触发事件监听器,这里只操作了一次 DOM ,提高了程序的性能。

1.1. 首先我们来看原生JS取消事件冒泡方法:

e.stopPropagation()//非IE浏览器

window.event.cancelBubble = true//IE浏览器

1.2. 原生JS阻止默认事件方法:

e.preventDefault()//非IE浏览器

window.event.returnValue = false//IE浏览器

2..2. vue.js阻止默认事件

//只需将click改成click.prevent

3.1. 右键阻止默认

@contextmenu.prevent="rightClick( popover${index} , day)"

3.2. 右键不阻止默认

@contextmenu="rightClick( popover${index} , day)"

如果<p>是在<div>里面,那么呢,<P>有一个onclick事件,<div>也有onclick事件,为了触发<P>的点击事件时,不触发父元素的点击事件,那么就需要调用如下函数:

代码如下:

function stopBubble(e){

if(e&&e.stopPropagation){//非IE

e.stopPropagation()

}

else{//IE

window.event.cancelBubble=true

}

}

<a onclick=''>如果要阻止默认事件的触发,即默认的href事件,那么就需要调用如下函数:

代码如下:

function stopDefault( e ) {

//阻止默认浏览器动作(W3C)

if ( e &&e.preventDefault )

e.preventDefault()

//IE中阻止函数器默认动作的方式

else

window.event.returnValue = false

return false

}