JavaScript-----阻止事件默认行为和事件冒泡

目录

一.阻止事件默认行为

1.preventDefault();方法

2.低版本浏览器 returnValue属性

3.return false;

e.stopPropagation();

e.cancelBubble = true;

  阻止事件冒泡的兼容性解决方案

---

一.阻止事件默认行为

阻止默认行为（事件）让链接不跳转或者让提交按钮不提交

阻止事件默认行为的三种方法:

1.preventDefault();方法

2.低版本浏览器 returnValue属性

3.return false;

可以利用return false 阻止默认行为,没有兼容性问题
   特点:return 后面的代码不执行了,而且只限于传统的注册方式

	<a href="www.baidu.com">baidu</a>
	</body>
	<script type="text/javascript">
		var a = document.querySelector('a ');
		a.addEventListener('click', function(e) {
			e.preventDefault(); //dom标准写法
		})
		//3．传统的注册方式
		a.onclick = function(e) {
			//普通浏览器e.preventDefault();方法
			e.preventDefault();
			//低版本浏览器ie678 returnValue属性
			e.returnValue;

			//可以利用return false 阻止默认行为,没有兼容性问题
			// 特点:return 后面的代码不执行了,而且只限于传统的注册方式
			return false;
		}

    

---

二.阻止事件冒泡的两种方式:   

以下是没有阻止冒泡行为的示例,会从最具体的元素向上床底:

   

 

  事件冒泡∶开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点。
        常见事件对象的属性和方法
        阻止冒泡dom推荐的标准stopPropagation()

e.stopPropagation();

//stop 停止  Propagation传播

e.cancelBubble = true;

//ie  cancel取消  bubble泡泡

		var son = document.querySelector('.son ');
		son.addEventListener('click', function(e) {
			alert('son ');
			e.stopPropagation(); //stop 停止  Propagation传播
			e.cancelBubble = true; //ie  cancel取消  bubble泡泡
		}, false);
		var father = document.querySelector('.father ');
		father.addEventListener('click', function() {
			alert('father ');
		}, false);
		document.addEventListener('click', function() {
			alert('document');
		})

 阻止冒泡排序之后:

 

阻止事件冒泡的兼容性解决方案
 

        if (e && e.stopPropagatio "){
            e.stopPropagation();
        }
        else {
            window.event.cancelBubble = true;
        }

CSDN话题挑战赛第一期
活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f