以下这种写法,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. 以太坊系列之十八: 百行go代码构建p2p聊天室

    百行go代码构建p2p聊天室 百行go代码构建p2p聊天室 1. 上手使用 2. whisper 原理 3. 源码解读 3.1 参数说明 3.1 连接主节点 3.2 我的标识 3.2 配置我的节点 3 ...

  2. 「HEOI2016/TJOI2016」序列

    题目链接 戳这 Solution 首先考虑最暴力的dp 我们设: \(f[i]\)表示选择\(i\)以后所能形成的满足条件的子序列的最大值 \(minx[i]\)表示\(i\)能转换为的最小值 \(m ...

  3. 修改Tomcat主目录

    在默认安装后,tomcat的主目录是webapps/root目录,如果我们想改变tomcat的主目录的话可以这样做: 1 %TOMCAT_HOME%/webapps/下直接创建,这种方法有一个缺点,就 ...

  4. 3人从小公寓创业,到世界最大引擎公司,Unity创始人谈14年...

    Unity创始人David Helgason出席了5月11 - 13日在上海举办的Unite 2017 Shanghai,并在大会期间接受了游戏陀螺的专访,动情地讲述了这14年来从3人在公寓创业,到成 ...

  5. 关于windows上 web 和 ftp 站点的创建及使用

    关于windows上 web 和 ftp 站点的创建及使用 引言 其实这是我网络基础课上的一次作业,觉得挺实用的,遂写成博客分享,也算是对这次作业的一次总结. 实验目的 通过此实验掌握WEB和FTP站 ...

  6. 题解 UVA10212 【The Last Non-zero Digit.】

    题目链接 这题在学长讲完之后和看完题解之后才明白函数怎么构造. 这题构造一个$f(n)$ $f(n)$ $=$ $n$除以 $2^{a}$ $*$ $5^{b}$ ,$a$ , $b$ 分别是 $n$ ...

  7. Python实现KNN算法

    Python实现Knn算法 关键词:KNN.K-近邻(KNN)算法.欧氏距离.曼哈顿距离  KNN是通过测量不同特征值之间的距离进行分类.它的的思路是:如果一个样本在特征空间中的k个最相似(即特征空间 ...

  8. Django 内建 中间件组件

    中间件 这篇文档介绍了Django自带的所有中间件组件. 要查看关于如何使用它们以及如何编写自己的中间件,请见中间件使用指导. 可用的中间件 缓存中间件 class UpdateCacheMiddle ...

  9. Spring学习笔记(三)—— 使用注解配置spring

    一.使用步骤 1.1 导包 1.2 为主配置文件引入新的命名空间(约束) 在applicationContext.xml中引入context约束 1.3 编写相关的类 public class Use ...

  10. Android 数据库框架GreenDao实战使用

    1.添加记录(SQLite 增) 2.删除记录(SQLite 删) 3.修改记录(SQLite 改) 4.查询记录(SQLite 查) <1> DAO查询 <2>QueryBu ...