以下这种写法,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>

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

a标签的 onclick 和 href 哪个先执行?的更多相关文章

  1. 关于a标签的onclick和href谁先执行的问题

    今天上午遇到一个问题,我想在a标签跳转的时候增加一些程序上的判断,但又不会影响a标签的正常跳转,于是就有了这篇文章. 我的具体代码是这样的: <a href="http://www.m ...

  2. 关于a标签的onclick与href的执行顺序

    onclick的事件被先执行,其次是href中定义的(页面跳转或者javascript), 同时存在两个定义的时候(onclick与href都定义了),如果想阻止href的动作,在onclick必须加 ...

  3. a标签的onclick和href事件的区别

    在执行顺序上href是低于onclick的,那么这个会造成什么影响呢 <div onclick="a()"> <a href="#" oncl ...

  4. 说说a标签的onclick和href

    在平时我们一般会在列表中的最后一列给加上操作功能,一般的操作功能是修改和删除,这个操作我们可以通过a标签来实现其功能. <a class="pn-opt" href=&quo ...

  5. a标签响应onclick事件,并且不执行href动作

    1.javascript:void(0)相当于一个死链接,href不执行 <a href="javascript:void(0)" onclick="doSomet ...

  6. a标签中的onclick和href的使用

    onclick和href 链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接):  假设链接中同时存在 href 与 onclick,如果 ...

  7. ASP.Net MVC 中a标签的onclick时间和href同时存在时候的处理

    问题出现: 本次项目在用到下载文件.导出文件的时候,需要在下载.导出之前进行判断,最初使用方式一.二,没能解决问题 方式一:使用href直接跳转controller方法,以下载为例: public A ...

  8. 【Javascript】IE8兼容 背景图片与a标签的onclick事件

    先说几句牢骚话. 虽然IE8比之IE6.7有很大的进步,但是在执行效率.兼容性上仍然有很多问题.被广大开发者喜爱的平台才是好平台. 可惜多亏当年盗版XP打开中国的计算机市场,IE作为一款捆绑软件仍然在 ...

  9. 关于easyui框架中a标签使用onclick()触发事件偶尔会选项卡消失BUG解决方案

    今天发现公司的一个easyui项目中有个页面会在触发onclick事件时选项卡消失,如下图 产生BUG后 产生BUG前 查找很多地方还有资料不知道哪里出现的问题,看了下框架源码之类的,因为不是专门的前 ...

随机推荐

  1. C#静态类 静态方法与非静态方法比较

    静态类 在类(class)上加入static修饰,表示该类无法被实例化,并将该类中,无法实例化变量或函数 静态类的主要特性 仅包含静态成员 无法实例化 静态类的本质,时一个抽象的密封类,所以不能被继承 ...

  2. (转)深入研究MiniMVC之后续篇

    今天在园子看到<深入研究 蒋金楠(Artech)老师的 MiniMvc(迷你 MVC),看看 MVC 内部到底是如何运行的>之后,本来是不打算开博来续这个后传,不过,在那边回了个评论之后, ...

  3. 以太坊系列之十六:golang进行智能合约开发

    以太坊系列之十六: 使用golang与智能合约进行交互 以太坊系列之十六: 使用golang与智能合约进行交互 此例子的目录结构 token contract 智能合约的golang wrapper ...

  4. 「HNOI2010」合唱队

    题目链接 戳我 \(Solution\) 令: \(f[i][j]\)为\([i,j]\)中最后排进去的是第i人 \(dp[i][j]\)为\([i,j]\)中最后排进去的是第j人 则排头的元素即\( ...

  5. ubuntu 安装 删除 卸载 Deb 包文件

    图形界面: 安装deb 直接双击图标,输入密码后就可自动安装. 卸载deb 1. 菜单-系统->系统管理->新立得软件包管理器 或 Alt+F2(运行窗口)输入 sudo synaptic ...

  6. Python 集合set()添加删除、交集、并集、集合操作详解

    集合:一个集合中,任何两个元素都认为是不相同的,即每个元素只能出现一次.每个元素的地位都是相同的,元素之间是无序的. 创建集合set python set类是在python的sets模块中,大家现在使 ...

  7. 20165219 2017-2018-2 《Java程序设计》第8周学习总结

    20165219 2017-2018-2 <Java程序设计>第8周学习总结 教材学习内容总结 进程与线程 线程是比进程更小的单位:线程间可以共享进程中的某些内存单元 java的多线机制 ...

  8. Python 简单说明与数据结构

    Python 简单说明与数据结构 Python 作为 "国内" 较流行的高级语言,具有代码容易理解.专注解决问题.混合编译其他语言的优点. 变量 变量是一个最基本的储存单位,它暂时 ...

  9. flask总结03

    一:flask的请求勾子 01:钩子概念说明: 在客户端和服务器交互的过程中,有些准备工作或扫尾工作需要处理,比如: 在请求开始时,建立数据库连接: 在请求开始时,根据需求进行权限校验: 在请求结束时 ...

  10. Android HttpURLConnection的使用+Handler的原理及典型应用

    1.介绍 总结:HttpURLConnection用来发送和接收数据. 2.ANR异常报错 (1)ANR(Application not response) 应用无响应, 主线程(UI线程) (2)如 ...