改变链接(<a>)中的onclick事件

最新推荐文章于 2026-05-07 14:37:12 发布

原创最新推荐文章于 2026-05-07 14:37:12 发布 · 1.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #链接

收录于

JS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍使用纯JavaScript和jQuery两种方式来改变HTML中链接的点击事件。通过具体实例展示了如何利用这两种方法来动态更新<a>标签内的onclick属性。

需求：点击按钮之后改变链接(<a>)中的onclick事件

方法一：纯js实现

<html>
	<head>
		<script>
		function change(){
			var a = document.getElementById("link");
			a.onclick = function(){};
			a.onclick = method1;
		}

		function method1(){
			alert('bb');
		}
		</script>
	</head>
	<body>
		<a href="javascript:;" onclick="alert('aa')" id="link">link</a>
		<br/>
		<input type="button" onclick="change()" value="button"/>
	</body>
</html>

方法二：jquery1.4.4实现

<html>
	<head>
		<script src="jquery-1.4.4.js"></script>
		<script>
		function change(){
			var a = $("#link");
			a.attr("onclick","");
			a.bind("click",method1);
		}

		function method1(){
			alert('bb');
		}
		</script>
	</head>
	<body>
		<a href="javascript:;" onclick="alert('aa')" id="link">link</a>
		<br/>
		<input type="button" onclick="change()" value="button"/>
	</body>
</html>

如上只是两种简单的实现。