<a/>中href和onclick的区别

最新推荐文章于 2025-12-01 17:12:07 发布

最新推荐文章于 2025-12-01 17:12:07 发布 · 143 阅读

文章标签：

#java #工作

java 专栏收录该内容

134 篇文章

订阅专栏

本文探讨了HTML中链接的onclick事件与href属性之间的交互作用。详细分析了如何通过返回false阻止默认行为，使用javascript:void(0)避免页面跳动，以及在不同场景下使用这两种属性时的注意事项。

<ol style="line-height: 1.4em; margin: 0px 0px 1.5em; font-size: 1em; padding: 0px;"><li style="margin: 0px 0px 0.25em 30px; font-size: 1em; padding: 0px;">[size=small;]链接的 <code style="font-family: 'courier new', courier, monospace; white-space: pre; font-size: 1em;">onclick</code> 事件被先执行，其次是 <code style="font-family: 'courier new', courier, monospace; white-space: pre; font-size: 1em;">href</code> 属性下的动作（页面跳转，或 javascript 伪链接）；[/size]</li><li style="margin: 0px 0px 0.25em 30px; font-size: 1em; padding: 0px;">[size=small;]假设链接中同时存在 <code style="font-family: 'courier new', courier, monospace; white-space: pre; font-size: 1em;">href</code> 与 <code style="font-family: 'courier new', courier, monospace; white-space: pre; font-size: 1em;">onclick</code>，如果想让 <code style="font-family: 'courier new', courier, monospace; white-space: pre; font-size: 1em;">href</code> 属性下的动作不执行，<code style="font-family: 'courier new', courier, monospace; white-space: pre; font-size: 1em;">onclick</code> 必须得到一个 <code style="font-family: 'courier new', courier, monospace; white-space: pre; font-size: 1em;">false</code> 的返回值。[/size]</li><li style="margin: 0px 0px 0.25em 30px; font-size: 1em; padding: 0px;">[size=small;]如果页面过长有滚动条，且希望通过链接的 <code style="font-family: 'courier new', courier, monospace; white-space: pre; font-size: 1em;">onclick</code> 事件执行操作。应将它的 <code style="font-family: 'courier new', courier, monospace; white-space: pre; font-size: 1em;">href</code> 属性设为 <code style="font-family: 'courier new', courier, monospace; white-space: pre; font-size: 1em;">javascript:void(0);</code>，而不要是 <code style="font-family: 'courier new', courier, monospace; white-space: pre; font-size: 1em;">#</code>，这可以防止不必要的页面跳动；[/size]</li><li style="margin: 0px 0px 0.25em 30px; font-size: 1em; padding: 0px;">[size=small;]如果在链接的 <code style="font-family: 'courier new', courier, monospace; white-space: pre; font-size: 1em;">href</code> 属性中调用一个有返回值的函数，当前页面的内容将被此函数的返回值代替；[/size]</li><li style="margin: 0px 0px 0.25em 30px; font-size: 1em; padding: 0px;">[size=small;]在按住shift键的情况下会有所区别。[/size]</li><li style="margin: 0px 0px 0.25em 30px; font-size: 1em; padding: 0px;">[size=small;]今天我遇到的问题，在ie6.0里以href的形式访问不到parentnode。[/size]</li><li style="margin: 0px 0px 0.25em 30px; font-size: 1em; padding: 0px;">[size=small;]尽量不要用javascript:协议做为a的href属性，这样不仅会导致不必要的触发window.onbeforeunload事件，在ie里面更会使gif动画图片停止播放。[/size]</li><li style="margin: 0px 0px 0.25em 30px; font-size: 1em; padding: 0px;">[size=small;]<span style="color: #ff0000;">调用js时候对参数的处理方式不一致，href会将url编码的内容自动转码，例如%22将会转成",从而导致被"%22"出现js错误。[/size]</span></li></ol>

<html>	<head>		<script type="text/javascript">		<!--		function handler1(arg1){			alert(arg1);		}		-->		</script>	</head>	<body>		<table width="155">		<tr>			<td>			<div style="height:195;width:157px;overflow:auto;border:1px solid #999999;">			   <table width="155" border="0" cellspacing="0" cellpadding="0" id="datatable">				<tr>					<a onclick="javascript:handler1('%22%5b%40', 'y', 'n', 'sam report');">test</a>.				</tr>				<tr>					<a href="javascript:handler1('%22%5b%40', 'y', 'n', 'sam report');">test1</a>				</tr>				   </table>			</div>			</td>		</tr>		</table>	</body></html>