欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

冒泡、捕获、阻止默认事件

程序员文章站 2022-05-13 16:02:31
...

Ele.addEventListener(type,fn,false);  false为冒泡  true为捕获

在同一个ele上可以绑定相同type事件,可以一个为冒泡一个为捕获。

会先执行捕获事件

  1. 事件冒泡:

从代码结构上(非视觉上)嵌套关系的元素,会存在冒泡功能。

点击子元素,会从子元素依次往父元素,触发事件。

  1. 事件捕获:

代码结构上(非视觉上)嵌套关系的元素,会存在捕获功能。

点击子元素,会自父元素捕获至子元素(该事件源元素)

触发顺序  先捕获 后冒泡

focus、blur、change、submit、reset、select等事件没有冒泡功能

 

取消冒泡与阻止默认事件

  1. 取消冒泡

·标准:event.stopPropagation();

·ie:event.cancelBubble=true;

 

  1. 阻止默认事件

阻止默认事件 方法

1. return false; 以对象属性的方式注册的事件才生效

2.event.preventDefault()  w3c标准  ie9下不兼容

3.event.returnValue = false; 兼容ie

表单提交、a标签跳转、右键菜单等

 

// 阻止默认事件 方法
// 1. return false; 以对象属性的方式注册的事件才生效
// 2.event.preventDefault()  w3c标准  ie9下不兼容
// 3.event.returnValue = false; 兼容ie
// 表单提交、a标签跳转、右键菜单等

// 阻止右键菜单


document.oncontextmenu = function(e){
	console.log(1);
	// return false;
	// e.preventDefault();
	// e.returnValue = false;
}


// 封装阻止默认事件 
function stopEvent(e){
	if (e.preventDefault) {
		e.preventDefault();
	}else{
		e.returnValue = false;
	}
}