html链接(<a>)中href属性和onclick事件执行先后顺序

最新推荐文章于 2025-12-24 21:12:03 发布

原创最新推荐文章于 2025-12-24 21:12:03 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #链接

JS 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了HTML中<a>标签的href属性与onclick事件的执行顺序问题，并通过实例代码展示了实际运行效果，即onclick事件优先于跳转链接执行。

需求：判断html链接(<a>)中href属性和onclick事件执行先后顺序。

<html>
	<head>
	</head>
	<body>
		<a href="http://www.baidu.com" onclick="alert('aa')">click here</a>
	</body>
</html>

运行上面的示例代码可以发现，是先执行了onclick事件，然后才链接到了www.baidu.com

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

frankingly

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端学习—HTML基础语法（1）

2301_79894300的博客

12-21

583

标签描述效果abbr定义缩写标记缩写词，鼠标 hover 时会显示完整含义（需配合title属性）address定义地址标记联系地址、作者信息等，默认样式是斜体bdo定义文字方向强制改变文字的阅读方向（dir="rtl"表示从右到左）blockquote定义长的引用标记大段引用内容，默认会缩进显示（区分正文）q定义短的引用语标记短句引用，默认会自动添加引号cite定义引用、引证标记引用的作品名称（如书籍、文章、电影名），默认样式是斜体dfn定义一个定义项目。

HTML5列表和超链接(1)

qq_42108313的博客

01-18

816

HTML5列表和超链接文章目录HTML5列表和超链接4.1 HTML5列表4.1.1 无序列表、有序列表4.1.2 项目编号4.1.3 嵌套列表、描述列表、菜单列表4.1.4 快捷菜单、添加命令4.1.5 设计快捷命令、设计任务列表4.2 HTML5超链接4.2.1 普通链接、块链接4.2.2 锚点链接、目标链接4.2.3 电子邮件链接、下载链接4.2.4 图像热点、框架链接4.3 项目实战4.3.1 设计导航页面4.3.2 设计九宫格板式4.3.3 设计用户管理界面 4.1 HTML5列表 4.1.1

参与评论您还未登录，请先登录后发表或查看评论

a标签中href与onclick执行先后问题

TimeTDIT的博客

10-07

7704

href与onclick执行顺序先后问题

onclick事件和超链接请求指向href发生顺序

gscaiyucheng的专栏

08-10

1987

form 当点击

点击a标签链接时，进行相应逻辑判断后再确定是否执行跳转

qq_45744011的博客

11-02

1212

针对点击链接时，如何进行逻辑判断的简单例子。

html中的超链接（a标签）加onclick点击事件

_江屿_

11-21

5799

html中的超链接（a标签）加onclick点击事件

html a标签中 href 和 onclick 同时使用的问题优先级别

mengzuchao的专栏

07-17

5375

Html A标签中 href 和 onclick 同时使用的问题优先级别 1 顺序 ie 6 : href 先触发 onclick 后触发其他浏览器先触发onlick 后触发 href 2 href="javascript: xxx()" 不能传入this作为参数 onclick可以代码如下 <a href="javascript:alert('href event'...

<a>标签href与js(onclick)的触发顺序

华仔的逆袭的专栏

12-22

8117

在前端标签<a> 的执行过程中遇到问题，发现了href与js(onclick)的触发是存在先后顺序的。优先级：onclik > href 如果不需要href的跳转可以使用event.preventDefault() 方法置于onclick函数中。如果只是把<a> 作为按钮使用可以使用href="javascript:void(0);"。<a href="index" onclick="to

前端学习—HTML 进阶

最新发布

2301_79894300的博客

12-24

846

dl>HTML 区块是指将网页中的元素进行分组归类的方式，目的是通过结构化包裹，方便统一控制样式、布局和逻辑，分为「块级区块」和「内联区块」两类，核心载体就是<div>（块级）和<span>（内联）。简单说：区块就像 “收纳盒”，把零散的网页元素按功能 / 样式归类，让页面结构更清晰、更易维护。HTML 布局就是用 HTML 区块（主要是<div>）配合 CSS，把网页的各个模块（头部、导航、主体、底部等）按预期位置摆放的过程，本质是对区块的合理规划和排列，目的是让网页结构清晰、视觉美观。

小白的《HTML5权威指南》笔记（第一部分）

canxuezhang的博客

10-15

456

粗涉

vue_t_v14

l1029455098的博客

03-21

3036

vue

Html A标签中 href 和 onclick 同时使用的问题优先级别

weixin_34362790的博客

09-04

171

我们在制作网页的时候用得最多的就是 A 标签超连接但有时候需要在 A 里同时用到 href 和 onclick属性下面我们先来分析一下，在不同的浏览器下有不同的效果 1 顺序 ie 6 : href 先触发 onclick 后触发其他浏览器先触发onlick 后触发 href 2 href="javascript: xxx()" 不能传入this作为参数 onclick可以 &lt...

html中a标签中的onclick和href的使用

zoohouse的专栏

08-23

4699

下面代码则执行了subgo()函数，点我在这里，javascript:void(0),没启实质上的作用，它仅仅是一个死链接，执行的函数是subgo()。点我与点我区别。实际上 #包含了一个位置信息默认的锚是#top 也就是网页的上端，而javascript:vo

html选择器优先级如何计算,CSS选择器权重计算与优先级

weixin_35728636的博客

06-05

3976

CSS选择器权重计算与优先级选择器有优先级，可以通过权重来计算优先级。一：优先级等级划分：第一优先级：css属性+!important是一种强制改变优先级的方法，它会覆盖页面内任何位置定义的元素样式，它拥有最高优先级。第二优先级：在html中给元素标签加style，即内联样式。第三优先级：由id选择器来定义。例如，#id{ }会覆盖.classname{ }第四优先级：由class选择器、属性选择...

html link 追加事件,jQuery如何将onClick事件绑定到动态添加的HTML元素

weixin_33791488的博客

05-31

202

jQuery如何将onClick事件绑定到动态添加的HTML元素我想将onClick事件绑定到我用jQuery动态插入的元素。但它从不运行绑定函数。如果您能指出这个示例不起作用的原因，以及如何让它正常运行，我会很高兴的：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">test of click bindingjQ...

html5onclick跳转,html中onclick事件属性定义与用法

weixin_42525798的博客

06-05

5236

在前端网页设计时，离不开一些动态事件的交互，比如提交数据，登录，注册等等。这事件一般都需要通过HTML onclick事件的调用，这篇文章重点介绍一下 onclick事件的定义与用法onclick事件的定义onclick 事件会在元素被点击时发生。语法：例1：定义一个简单的点击事件html代码JS代码functionds(){alert('我出现了啊');}运行后，我们点击按钮出弹出一个信息，如...

a标签的onclick与href的执行顺序说明

授人以渔的博客

02-24

689

onclick的事件被先执行，其次是href中定义的地址或是动作同时存在两个定义的时候（onclick与href都定义了），如果想阻止href的动作，在onclick必须加上return false;一般是这样写οnclick="xxx();return false;". 在href中定义的函数如果有返回值的话，当前页面的内容将被返回值代替 ...

a标签的 onclick 和 href 哪个先执行？

weixin_30419799的博客

03-06

428

a标签的 onclick 和 href 哪个先执行？原文:a标签的 onclick 和 href 哪个先执行？以下这种写法，onclick 事件先执行， href 属性下的动作后执行（页面跳转或 javascript 伪链接），如果不想执行 href 属性下的动作，onclick 需要返回 false。 <a href="htt...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>后台管理布局</title> <script> function showContent(content) { const mainContent = document.querySelector('.main-content'); mainContent.innerHTML = `<h2>操作区域 - ${content}</h2><p>这是 ${content} 的具体操作内容。</p>`; } </script> </head> <body> <div class="sidebar"> <ul> <li><a href="#" onclick="lm.php('功能1')">添加栏目</a></li> <li><a href="#" onclick="lmlb.php('功能2')">栏目列表</a></li> <li><a href="#" onclick="index.php('功能3')">首页</a></li> </ul> </div> <div class="main-content"> <h2>操作区域</h2> <p>这里显示具体的操作内容。</p> </div> </body> </html>

12-04

<li><a href="#" onclick="showContent('lmlb.php', '功能2')">栏目列表</a></li> <li><a href="#" onclick="showContent('index.php', '功能3')">首页</a></li> </ul> </div> <div class="main-content"> <h2...