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

来源：互联网发布：java base64解码图片编辑：程序博客网时间：2024/05/15 23:47

在某些场景下，我们需要对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 onclick="abc();">点击弹框</a><a href="http://www.sina.com.cn" onclick="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属性被设置，则需要按照场景重新书写逻辑，大家根据我的代码举一反三吧。

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

0 0