event.stopPropagation()、event.preventDefault()、return false 冒泡事件 默认事件

参考文章: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做的处理,导致有阻止事件冒泡的功能。

三种绑定事件的方式:

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函数的返回值是不起作用的。*/
    }
}

 

你可能感兴趣的:(Javascript)