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

我就是我 2022-05-20 10:13 189阅读 0赞

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

**1 顺序**

ie 6 : href 先触发 onclick 后触发

其他浏览器 先触发onlick 后触发 href

**2 href="javascript: xxx()"**

不能传入this作为参数

onclick可以

代码如下

`<a href="javascript:alert('href event');" onclick="clickevent(this);">`

**3 优先触发的方法如果返回 false 导致后一个事件不被触发**

比如

代码如下

`<a href="javascript:alert('href event');" onclick="clickevent(this); return false;">`

**4**

<a href="\#"> 会导致页面定位到书签位置，

**5**

由于 1和 4 的原因

在ie6 下 同时有 <a href="\#" 和 onclick的时候 由于页面先因为href重新载入了一次，导致 onclick事件被浏览器丢弃。

**6 总结：**

1) 在不需要传递this作为方法的参数时候，推荐

只使用href="JavaScript: "

2) 如果需要使用this参数，推荐

代码如下

`<a href="javascript:void(0);" onclick="doSomthing(this)" >`

如下面一个列子。

我们需要A在第一次和第二次点击的时候 访问 href 第3次以后的就访问另一个地址

代码如下

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <code>var href=0</code> <code>function clicka(obj)</code> <code>{ </code> <code>&nbsp;</code><code>if (href==2)</code> <code>&nbsp;</code><code>{ </code> <code>&nbsp;</code><code>obj.href="<a href="http://www.baidu.com/?qc" rel="nofollow">http://www.baidu.com?qc</a>";</code> <code>&nbsp;</code><code>}else</code> <code>&nbsp;</code><code>{ </code> <code>&nbsp;</code><code>href++;</code> <code>&nbsp;</code><code>}</code> <code>&nbsp;</code><code>return true;</code> <code>}</code> <code>&nbsp;</code><code>&lt;</code><code>a</code> <code>href</code><code>=</code><code>"//www.jb51.net/"</code> <code>target</code><code>=</code><code>_blank</code> <code>id</code><code>=</code><code>"showa"</code> <code>onclick</code><code>=</code><code>"clicka(this)"</code><code>&gt; 开屏高速下载 &lt;/</code><code>a</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

**在a标签的href与onclick中使用javascript的区别**

链接的 onclick 事件被先执行，其次是 href 属性下的动作（页面跳转，或 javascript 伪链接）；

假设链接中同时存在 href 与 onclick，如果想让 href 属性下的动作不执行，onclick 必须得到一个 false 的返回值。不信，你可以将 goGoogle 函数中的 return false 注释掉；

如果页面过长有滚动条，且希望通过链接的 onclick 事件执行操作。应将它的 href 属性设为 javascript:void(0);，而不要是 \#，这可以防止不必要的页面跳动；

如果在链接的 href 属性中调用一个有返回值的函数，当前页面的内容将被此函数的返回值代替；

在按住Shift键的情况下会有所区别。

今天我遇到的问题，在IE6.0里以href的形式访问不到parentNode。

尽量不要用javascript:协议做为A的href属性，这样不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。

就这些，花了不少时间在这上面。

\[缘由\]

用CheckBoxList控件时想实现在每个checkbox后再加链接的功能，点链接实现一些功能之外，还要把checkbox选中。

代码如下

[?][Link 1]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"checkbox"</code> <code>name</code><code>=</code><code>"chk"</code> <code>id</code><code>=</code><code>"chk"</code><code>&gt;</code> <code>&lt;</code><code>label</code> <code>for</code><code>=</code><code>"chk"</code><code>&gt;选中它&lt;</code><code>a</code> <code>onclick</code><code>=</code><code>"this.parentNode.click();"</code> <code>href</code><code>=</code><code>"<a href="http://luwenxiang1990.blog.163.com/blog/" rel="nofollow">http://luwenxiang1990.blog.163.com/blog/</a>#"</code> <code>style</code><code>=</code><code>"border:solid 1px blue;"</code><code>&gt;[label中的链接]&lt;/</code><code>a</code><code>&gt;&lt;/</code><code>label</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

最后用parentNode来实现的。

更多：[https://www.jb51.net/article/103151.htm][https_www.jb51.net_article_103151.htm]

[Link 1]: https://www.jb51.net/article/103151.htm#
[https_www.jb51.net_article_103151.htm]: https://www.jb51.net/article/103151.htm