参考文章:https://blog.csdn.net/qq_39207948/article/details/79408323
1.event.stopPropagation()方法
这是阻止事件的冒泡方法,不让事件向document上蔓延,但是默认事件依然会执行,当你调用这个方法的时候,如果点击一个连接,这个连接仍然会被打开;
2.event.preventDefault()方法
这是阻止默认事件的方法,调用此方法是,链接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;
3.return false ;
这个方法比较暴力,他会同时阻止事件冒泡也会阻止默认事件;写上此代码,连接不会被打开,事件也不会传递到上一层的父元素;可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()
以上是原文中的内容;
---------------------------------------分割线----------------------------------------
参考文章中的代码是基于jquery的,其实在原生js中return false是不会阻止事件冒泡的,只会阻止默认事件,是jquery对return false做的处理,导致有阻止事件冒泡的功能。
三种绑定事件的方式:
<form action="http://www.test.com/Dailoge/" onsubmit="return check()">
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
function check(){
if(!confirm('确定?')){
return false; //很关键的地方在onsubmit中要写return,才有效
}
}
</script>
<form action="http://www.test.com/Dailoge/">
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
myform = document.getElementsByTagName('form')[0]
myform.onsubmit = function () {
if (!confirm('你确定?')) {
return false;
}
}
</script>
myform = document.getElementsByTagName('form')[0];
if (myform.addEventListener) {
myform.addEventListener('submit', check, false);
} else {//for ie
myform.attachEvent("onsubmit", check);
}
function check(ev) {
if (!confirm('确定?')) {//验证出错的情况just a demo
ev = ev || window.event; // Event对象
if (ev.preventDefault) { // 标准浏览器
ev.preventDefault();
} else { // IE浏览器
window.event.returnValue = false;
}
/*return false; 无效
我们测试的时候我们会发现IE下能够阻止表单提交,但是FF、chrome等浏览器并不能阻止表单提交
原因是:Object EventListener:This is an ECMAScript function reference. This method has no return value. The parameter is a Event object.
可见,listener是没有返回值的(写了也不会认),因此我们的check函数的返回值是不起作用的。*/
}
}