创意书
© 本文 by 少年
版权所有，作者未对本笔记声明转载限制，转载时请注明本文标题和链接。
笔记
原生JavaScript实现页面a链接的自动监听并阻止a链接自动跳转，话不多书直接，上代码（这是功能演示代码，我个人还做了ajax的访问和点击的数据收集和自动提交数据库）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原生JavaScript实现页面a链接的自动监听</title>
</head>
<body>
<div class="box">
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
<p><a href="https://www.baidu.com">百度</a></p>
<p><a href="https://www.runoob.com/"><img src="https://www.runoob.com/wp-content/themes/runoob/assets/img/runoob-logo.png" /></a></p>
<p><a href="https://www.qq.com">腾讯</a></p>
<p><a href="https://www.zhihu.com"><b>知乎</b></a></p>
</div>
<script>
var links = document.querySelector("body");
links.addEventListener('click',function(e){
e.preventDefault();//阻止原A链接直接跳转
var ali='0';
if(e.target.tagName=="A"){
ali = e.target;//获取文字+A标签的a链接
}else if(e.target.parentNode.tagName=="A"){
ali = e.target.parentNode;//获取img+a标签的a链接或其他有一层内嵌标签的链接
}else if(e.target.parentNode.parentNode.tagName=="A"){
ali = e.target.parentNode.parentNode;//获取有两层内嵌标签的a链接
}else{
ali = e.target.parentNode.parentNode.parentNode;//为确保获取到点击的a链接，我加了第三层内嵌
}
if(ali.tagName=='A'){
bt(ali);//执行操作，可以执行相关操作后再执行跳转
}
});
function bt(el){
console.log(el.tagName+"："+el.href);//执行操作
//window.location.href = el.href; 跳转，也可以传值给新的安全提醒页面，几秒后再进行跳转
}
</script>
</body>
</html>
希望能帮助到大家，当然这个功能jquery实现起来比较简单，直接:$("a").click(function(){//执行代码内容});
---
转载请注明本文标题和链接：《 原生JavaScript实现页面a链接的自动监听并阻止a链接自动跳转 》
TAG： javascript
2023-04-23 22:43:32回复