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

三种绑定事件的方式:

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

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值