原生JavaScript实现页面a链接的自动监听并阻止a链接自动跳转

by 少年2022-06-08
  • 2 赞
  • 1 收藏
  • 技术
  • 0 评论
  • 239 阅读
© 本文 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(){//执行代码内容});

---

TAG: javascript
评论

还没有评论奥,快来抢个沙发吧!

(有 0 条评论)