zoukankan      html  css  js  c++  java
  • a标签的 onclick 和 href 哪个先执行?

     以下这种写法,onclick 事件先执行, href 属性下的动作后执行(页面跳转或 javascript 伪链接),如果不想执行 href 属性下的动作,onclick 需要返回 false。

    <a href="https://www.baidu.com/" onclick="doSomething()">链接</a>

    这种写法我在写侧边导航栏的时候用到了,就是点击事件和页面跳转事件同时存在,可能页面跳转事件处理并没有覆盖掉点击事件的处理程序,所以暂时没有出现什么问题,但总感觉怪怪的,以后发现问题的话再补充吧……

    如果实际应用中,确实需要 a 标签来响应 onclick 事件的,且不想执行 href 属性下的动作,推荐以下3种写法:

    1、 javascript:void(0) 相当于一个死链接,href 不执行

    <a href="javascript:void(0)" onclick="doSomething()">链接</a>

    2、onclick 返回 false,href 不执行

    <a href="https://www.baidu.com/" onclick="doSomething();return false;">链接</a>

    3、onclick 返回 false,href 不执行

    <a href="https://www.baidu.com/" onclick="doSomething();event.returnValue=false;">链接</a>

    以下这种写法也可以用,但不推荐

    <a href="javascript:open()">链接</a>

    不推荐原因:尽量不要使用 javascript: 协议作为 a 的 href 属性,这样会导致不必要的触发 window.onbeforeunload 事件,在IE下还会使 gif 动画图片停止播放。

    再严重一点,可能会有人这么写

    <a href="javascript:open()" onclick="doSomething()">链接</a>

    不推荐原因:我在想,如果这两个事件里处理的东西没有重叠,不会互相覆盖的话,那这么写可不可以?有待考证

  • 相关阅读:
    mongodb安装
    node版本的管理 n
    npm 命令
    nodejs,npm安装(ubuntu14.04下)
    yeoman,grunt,bower安装(ubuntu14.04)
    什么是堆和栈,它们在哪儿?
    malloc函数详解 (与new对比)
    单链表的C++实现(采用模板类)
    短信验证码
    webapi
  • 原文地址:https://www.cnblogs.com/YYvam1288/p/7148929.html
Copyright © 2011-2022 走看看