在某些場景下，我們需要對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" target="_blank" rel="external nofollow" >跳轉百度</a>
<a οnclick="abc();">點選彈框</a>
<a href="http://www.sina.com.cn" target="_blank" rel="external nofollow" ο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屬性被設定，則需要按照場景重新書寫邏輯，大家根據我的代碼舉一反三吧。
如有錯誤，請及時指正，感謝！
![Javascript建構Bingo卡片遊戲[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)