<div id="wrap" style="width: 200px; height: 200px; background: gray;">
<div id="btn" style="width: 100px; height: 100px; background: orangered;"></div>
<a id="prevent" target="_blank" href="http://www.baidu.com">preventDefault</a>
</div>
标准浏览器的使用方法 preventDefault(): 用于阻止事件的默认行为; 比如: a 链接的跳转行为和表单自动提交行为
var prevent = document.getElementById("prevent");
prevent.addEventListener("click", function(event){
event.preventDefault();
}, false);
//使用preventDefault()方法就阻止了a标签打开新窗口的默认行为
stopPropagation(): 用于阻止事件的进一步获取和传播; 比如:阻止事件继续向上层冒泡
var btn = document.getElementById("btn"),
wrap= document.getElementById("wrap");
btn.addEventListener("click",function(event){
alert("btn");
event.stopPropagation();
},false);
wrap.addEventListener("click",function(){
alert("wrap");
},false);
//点击btn时,这样就阻止了id="btn"向上级id="wrap"冒泡,打印出来的结果是:弹窗仅弹出btn。否则,将会先弹出btn,然后弹出wrap。
event.returnValue = false; //阻止事件的默认行为; event.cancelBubble = true; //阻止事件的进一步获取或者冒泡;
function prevent(event) {
event = event || window.event;
if(event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
//使用 if else 去判断
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。