• 不使用return false阻止event默认行为


    当我们点击一个a标签时,如果这个标签的href指向了另一个地址,那么浏览器会默认跳转到此地址。在页面中,有时我们需要触发点击事件,但是又不想触发默认行为,就需要阻止event的默认行为了。

    常规做法

    众所周知,IE早期版本的event对象与DOM标准中的event对象并不相同,所以一般的兼容性写法是这样的:

    if (event.preventDefault) {
        event.preventDefault(); //支持DOM标准的浏览器
    } else {
        event.returnValue = false; //IE
    }

    非常规

    在原生JS下

    但是还有一种人,喜欢在函数结尾用return false;来阻止event默认行为,不过这种方法覆盖面不全,不建议使用,先来看规范是如何定义的:
    W3C Document Object Model Events Specification 1.3.1版中。

    在jQuery下:

    jQuery中,就不是简单的覆盖面和规范的问题了。在jQuery事件处理函数中调用return false;相当于同时调用了preventDefaultstopPropagation方法,这会导致当前元素的事件无法向上冒泡,在事件代理模式下,会导致问题。

    比如,我有一个div容器,里面是 几个a标签,它们的href里分别存储了url地址,这个url被用来动态的载入到下面的div#content中,这里为了简单演示,就只把url字符串写入到div#content中:

    <div id="container">
       <a href="/content1.html">content1</a>
       <a href="/content2.html">content2</a>  
       <div id="content">我会根据点击链接的url不同而改变的</div>
    </div>
    // 为container下的所有a标签绑定click事件处理函数
    $("#container").click(function (e) {
       if (e.target.nodeName == "A") {
            $("#content").html(e.target.href);
        }
    });
    // 再为a标签绑定click事件处理函数,阻止默认事件
    $("#container a").click(function () {
      return false;
    });

    上面的代码运行后,虽然阻止了a标签的点击默认行为,但同时停止了冒泡事件,导致其外层的父元素无法检测到click事件,所以jQuery中请明白return false;preventDefault二者的区别。

    总结

    不要用return false;来阻止event的默认行为

  • 相关阅读:
    css
    css笔记
    css笔记
    echarts
    css笔记
    跨域
    JS案例
    html2canvas
    echarts
    echarts
  • 原文地址:https://www.cnblogs.com/roberter-chen/p/5992418.html
Copyright © 2020-2023  润新知