js中重写a标签的href属性和onclick事件

最新推荐文章于 2023-06-12 14:27:57 发布

yangrenjunjiayou

最新推荐文章于 2023-06-12 14:27:57 发布

阅读量1.4w

点赞数

分类专栏：前端 js jQuery 文章标签： javascript html jquery 标签单击事件

本文链接：https://blog.csdn.net/yangrenjunjiayou/article/details/70919082

版权

前端同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

jQuery

3 篇文章 0 订阅

订阅专栏

在某些场景下，我们需要对HTML的标签进行重写。这里介绍如何重写a标签的href属性和onclick事件，重写后，每当点击a标签对象都会调用自己重写的方法。

html代码：

<html>
	<title>重写a标签单击事件和href属性</title>
	<head>
		<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
		<script src="rewrite_a.js"></script>
		<script type="text/javascript">
			function abc(){
				alert("abc方法的单击事件执行了");
			}
			function def(){
				alert("def方法的单击事件执行了");
			}
		</script>
	</head>
	<body>
		<a href="http://www.baidu.com">跳转百度</a>
		<a οnclick="abc();">点击弹框</a>
		<a href="http://www.sina.com.cn" οnclick="def();">两个都有</a>
	</body>
</html>

js代码：

var _event_list = {};
$(function(){
	// 找到页面上所有的a标签
	var links = $(document).find("a");
	// 循环数组，拿到每一个a标签
	for(var index in links) {
		// 保存click属性的值
		var _click = links.eq(index).attr("onclick");
		// 保存href属性的值
		var _href = links.eq(index).attr("href");
		if( _click != null) {
			// 给onclick属性重新设值
			links.eq(index).attr("onclick","eval_a_click_event('a"+index+"')");
		}
		if(_href != null) {
			// 给href属性重新设值
			links.eq(index).attr("href","javascript:eval_a_href_event('a"+index+"')");
		}
		_event_list["a"+index] = [links.eq(index),_href,_click];
	}
})

function eval_a_click_event(id) {
	var link = _event_list[id];
	if(link != null && link[2] != null) {
		// 拿到单击事件的方法
		alert(link[2]);
		// 执行单击事件
		eval(link[2]);
	}
}

function eval_a_href_event(id) {
	var link = _event_list[id];
	if(link != null && link[1] != null) {
		// 拿到href属性的值
		alert(link[1]);
		// 将href属性值重新赋回原来的值
		link[0].attr("href",link[1]);
		// 移除单击事件
		link[0].removeAttr("onclick");
		// 模拟单击事件
		link[0][0].click();
		// 重写href属性的值
		link[0].attr("href","javascript:eval_a_href_event('"+id+"')");
		// 如果有单击事件，重新加上
		if(link[2] != null) {
			link[0].attr("onclick",link[2]);
		}
	}
}

以上只是模拟a标签在本页面跳转到新页面。如果a标签的target属性被设置，则需要按照场景重新书写逻辑，大家根据我的代码举一反三吧。

如有错误，请及时指正，感谢！