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

最新推荐文章于 2019-03-27 11:35:38 发布

原创最新推荐文章于 2019-03-27 11:35:38 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #链接

JS 专栏收录该内容

3 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：判断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

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

gscaiyucheng的专栏

08-10

1973

form 当点击

Window.location.href 执行问题

fyhjuyol的专栏

02-08

3173

window.location.href //执行后还会继续向下执行js,要加return; 如： alert("1111"); window.location.href = "jzcxtjAction!tctj_init.do"; return;

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

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

TimeTDIT的博客

10-07

7672

href与onclick执行顺序先后问题

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

confused9090的专栏

08-06

1万+

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

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

欲寄彩笺兼尺素，山高水阔知何处

03-05

781

转载：https://www.cnblogs.com/YYvam1288/p/7148929.html?utm_source=itdadao&utm_medium=referral以下这种写法，onclick 事件先执行， href 属性下的动作后执行（页面跳转或 javascript 伪链接），如果不想执行 href 属性下的动作，onclick 需要返回 false。<a hr...

a标签 onclick事件和href事件执行的先后顺序

lllkkk0126的博客

03-27

3154

a标签中href与onclick的执行先后关系是什么？先回答这个问题吧：onclick的执行顺序优于href顺序，执行完onclick才会执行href跳转。今天做项目时有个需求是点击<a href>时需要在此之前验证是否可以跳转，就需要指定一个onclick事件，若不跳转则返回一个false即可。转载地址：https://blog.csdn.net/qq_35580883...

<a>标签中 href 和 onclick 的区别，以及href="javascript:xxx(this);"与onclick="xxx(this);" 传递this参数的区别

热门推荐

有范管理美学 | 公众号/头条号：有范管理美学

08-18

3万+

标签中href属性动作和onclick事件的区别，以及href="javascript:xxx(this);"与onclick="xxx(this);" 传递this参数的区别一、href 与 onclick 的区别我以前在写标签的 href 和 onclick 一直很随意，后来出过几次问题，以后才开始重视这个问题：首先摘录一篇文

Html A标签中 href 和 onclick用法、区别、优先级别

MyDriverC

03-07

2万+

如果不设置 href属性在IE6下面会不响应hover。双击后会选中标签的父容器而非这个一a标签（IE下都存在这一问题）。代码如下复制代码假定我们有个fn方法，需要取到这个元素，第一个方法传入的this是空值。所以，比较推荐的写法是代码如下复制代码 javascript:void

a的href属性和onclick的执行顺序

huihui870311的专栏

09-10

493

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

JavaScript-父子dom同时绑定两个点击事件，一个用捕获，一个用冒泡时执行顺序

柒青衿的博客

05-12

1万+

JavaScript-在父元素与子元素都绑定多个事件时执行顺序事件的执行顺序绝对是让人头疼的问题。当父元素与子元素都绑定了多个事件，且有的绑定在冒泡阶段、有的绑定在捕获阶段时，事件的触发顺序如何？如果你只关心这个问题，请直接下滑到3. 绑定多个事件，且由用户行为触发。如果你想细致了解JavaScript中的事件发生，请慢慢阅读。1. 原生事件的发生顺序一般来讲，当为一个a标签添加click事件以后，

a 标签的href 和onclick 执行顺序？

雅客

04-23

3842

a标签中同时存在href 与 onclick，想让通过onclick的返回值判断是否执行href，如果return的false就不执行，true就执行。<a href="${entity.path}" style="color: #3FABE9;" onclick="return isLoad()">下载</a><script type="text/javascrip.

click、onclick、on事件执行优先级

xsf1840的博客

08-16

1万+

按照事件冒泡的触发顺序，应该是我的事件先触发结果不是这样的。我发现使用$().click(function(){})绑定的事件，而我使用$("body").on("click","",function(){})绑定的事件。我希望比较一下它们的差别，专门写了一下代码，查看运行结果。代码如下： 1 2 3 4 5 div id="

html页面元素onclick 和 jquery绑定click执行顺序

曾子墨

04-10

6012

New Document $(function(){ $("#test").click(function(){ alert(1); }); }); 结论，两个click都执行，顺序：alert(2); alert(1);

<dd><a href="javascript:;">menu 1</a></dd>链接怎么写

最新发布

03-08

<think>好的，用户问的是关于如何编写一个包含链接的HTML菜单项，具体例子是<dd><a href="javascript:;">menu 1</a></dd>。首先，我需要确认用户对HTML的基础知识是否了解。可能用户刚开始学习HTML，所以需要从基础讲起。接下来，我应该分解这个代码的结构。需要解释每个标签的作用，比如<dd>通常是定义列表中的描述部分，但在这里可能被用来作为菜单项。然后<a>标签是链接标签，href属性通常指向URL，但这里的值是javascript:;，这可能需要解释它的用途，比如阻止默认跳转行为，常用于配合JavaScript事件。用户可能想知道如何正确设置链接，或者为什么使用javascript:;。需要说明这种写法的作用，以及替代方案，比如使用#作为占位符，同时提醒添加event.preventDefault()来阻止页面跳转。此外，还要提到如果不需要JavaScript，应该使用真实的URL。另外，用户可能在实际项目中需要创建导航菜单，所以给出一个完整的示例结构会更有帮助。需要展示一个典型的导航菜单结构，使用<ul>和<li>，并说明最佳实践，比如使用列表项和CSS来美化菜单。还要注意潜在的问题，比如javascript:;可能会导致依赖JavaScript的情况，如果用户禁用JS，链接会失效，所以需要根据实际情况选择合适的方案。同时，强调语义化HTML的重要性，比如使用<nav>标签和ARIA属性来提高可访问性。最后，确保回答结构清晰，分点说明，让用户能够逐步理解每个部分的作用和如何正确编写代码。避免使用过于专业的术语，保持简洁易懂，适合初学者的水平。</think>这个HTML结构是一个典型的导航菜单项写法，让我们逐步分析： **1. 基础结构解析：** ```html <dd><a href="javascript:;">menu 1</a></dd> ``` - `dd` 标签：定义列表中的描述部分（通常与 `dl` 和 `dt` 配合使用） - `a` 标签：超链接标签 - `href="javascript:;"`：特殊写法，表示点击后执行空JavaScript代码 **2. href属性的三种常见写法：** ```html  <a href="https://example.com">真实链接</a>  <a href="#section1">页面锚点</a>  <a href="javascript:;">menu 1</a> ``` **3. `javascript:;` 的作用：** - 阻止默认跳转行为 - 常用于配合JavaScript事件（如点击后执行函数） ```html <a href="javascript:;" onclick="handleClick()">菜单项</a> ``` **4. 更规范的写法建议：** ```html  <a href="#">菜单项</a>  <a href="#" onclick="event.preventDefault(); myFunction()">菜单项</a> ``` **5. 完整导航菜单示例：** ```html <nav> <ul> <li><a href="/home">首页</a></li> <li><a href="/products">产品</a></li> <li><a href="/contact">联系我们</a></li> </ul> </nav> ``` **注意事项：** 1. 如果不需要实际跳转，推荐使用 `href="#"` 并配合 `event.preventDefault()` 2. `javascript:;` 写法会强制依赖JavaScript执行环境 3. 实际项目中建议添加ARIA角色提升可访问性： ```html <nav role="navigation"> <ul role="menu"> <li role="menuitem"><a href="/">首页</a></li> </ul> </nav> ``` **扩展应用（带CSS的导航菜单）：** ```html <style> .nav-menu { list-style: none; padding: 0; } .nav-menu li { display: inline-block; margin: 0 15px; } .nav-menu a { text-decoration: none; color: #333; padding: 5px 10px; border-radius: 4px; } .nav-menu a:hover { background: #f0f0f0; } </style> <ul class="nav-menu"> <li><a href="#about">关于我们</a></li> <li><a href="#services">服务项目</a></li> <li><a href="#portfolio">案例展示</a></li> </ul> ```