目录
一.阻止事件默认行为
阻止默认行为（事件）让链接不跳转或者让提交按钮不提交
阻止事件默认行为的三种方法:
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