首页 > 文章列表 > a标签内onclick跳转失效:为什么点击链接没有反应?

a标签内onclick跳转失效:为什么点击链接没有反应?

465 2024-12-10

a标签内onclick跳转失效:为什么点击链接没有反应?

a标签内onclick跳转失效

在a标签中使用onclick事件处理程序跳转页面时,遇到无法正常跳转的情况。代码如下:

`<div class="cnblogs_code">
<pre>
<html>
<head>
<script type="text/jscript">
function rechargetp(){

$("#rechargeah").attr('href',"https://www.baidu.com/");    

}
</script>
<title>无标题文档</title>
</head>

<body>
<a href="https://www.baidu.com/" id="rechargeah" onclick="rechargetp();" target="_blank">点我跳转</a>
</body>
</pre>`

调试后发现,页面可以正常渲染,但点击“点我跳转”链接后没有任何反应。

原因分析

onclick事件处理程序优先级高于href属性,当onclick事件执行时,会覆盖href指定的url。如果onclick事件中没有手动修改href值,则跳转将不会发生。

解决方案

为了解决这个问题,可以在onclick事件处理程序中手动修改href值,确保与target url一致。修改后的代码如下:

`<div class="cnblogs_code">
<pre>
<html>
<head>
<script type="text/jscript">
function rechargetp(){

$("#rechargeAh").attr('href',"https://www.baidu.com/");
window.location.href = "https://www.baidu.com/";

}
</script>
<title>无标题文档</title>
</head>

<body>
<a href="https://www.baidu.com/" id="rechargeah" onclick="rechargetp();" target="_blank">点我跳转</a>
</body>
</pre>`

来源:1730332157