• 由href return false 来看阻止默认事件


    很多时候我们都想阻止一个a ?link的href跳转。

    1
    <a onclick=” return false ;” href=”www. 360 .cn”>click</a>

    以上代码可以达到这个效果

    有一点要注意

    1
    2
    3
    4
    5
    6
    7
    function stop(){
      
    return false ;
      
    }
      
    <a onclick=”stop();” href=”www. 360 .cn”>click</a>

    这么写是不会阻止默认事件的,stop()反回false, ?onclick却没有返回值 只有事件的返回值是false时 才会阻止默认事件 所以要这么写:

    1
    <a onclick=” return stop();” href=”www. 360 .cn”>click</a>

    这样就会有效果, 那么如果是用绑定事件的方式呢 会怎么样呢

    qwrap是用标准的事件绑定方式来做的 可以用它来测试

    1
    2
    3
    <a id=”testa” href=”www. 360 .cn”>click</a>
      
    W(‘#testa’).click( function (){ return false ;}); // 这是一个标准的绑定事件方法

    测试后发现 ie是可以阻止默认事件的 ?标准浏览器 chrome firefox等却没有能阻止 直接发生了跳转

    分析后发现因为标准浏览器使用 addEventListener 绑定事件 而该方法是没有返回值的,可参见w3c文档 没有返回值, 返回值当然不会是false所以继续执行href 。

    而ie使用attachEvent的方法这个方法是有returnValue的参见?http://msdn.microsoft.com/en-us/library/ie/aa703898(v=vs.85).aspx

    所以成功阻止了默认事件,

    那么使用addEventListener绑定事件 如何阻止呢 ?

    虽然addEventListener 不能有返回值 但是它有一个方法 preventDefault() 专门用来阻止默认事件 ,

    1
    W(‘#testa’).click( function (e){ e.preventDefault();});

    这样就可以成功阻止了.

    所以 用addEventListener绑定的事件 必须用preventDefault()来阻止默认事件

    但是又有一个现象

    1
    $(‘#testa’).click( function (){ return false ;});

    query 却可以做到, 以上代码运行成功在所有浏览器

    这是为什么 ?这并不是jquery可以例外 只是它悄悄的调用了preventDefault() 和 stopPropagation()

    jqeury会把事件的响应函数封装在一个dispach的函数里 如果发现你的函数return false 就会同时调会preventDefault() 和stopPropagation()

    所以在jquery中 return false 等价于:

    1
    2
    3
    4
    5
    e.preventDefault()
      
    e.stopPropagation()
      
    return false ;

    这三个

  • 相关阅读:
    装饰者模式(包装模式)
    内网穿透
    SpringMVC框架工作流程图及工作原理
    Java 使用 Socket 判断某服务能否连通
    最简单的一个socket客户端,保持连接服务端
    java读取txt文件
    SQL汇总
    最简单的一个socket服务端
    初级软件工程师怎么走向BATJ?——献给迷茫中的测试人
    软件测试工程师——100问面试题,你敢来接招吗?
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/3194335.html
Copyright © 2020-2023  润新知