首先我们需要明白何为浏览器的默认行为，比如a标签，在默认状态下，当我们点击时它就会发生跳转，这个行为是浏览器默认的。
如果我们既想使用a标签，又不想让它跳转，那么就需要使用本节所讲的知识。
在js中有两种常用的的阻止浏览器默认行为的方法
- 1、事件对象.preventDefault();
- 2、在事件函数里return false;
下面请看代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="div1" style="width:300px;height:300px;background-color:rgb(179, 226, 148);">
<a id="teamczyx" href="https://www.teamczyx.com">慈众网络科技</a>
</div>
<script type="text/javascript">
//阻止a标签的跳转
document.getElementById('teamczyx').onclick = function(e){
//获取兼容性的事件对象
var e = e || window.event;
console.log('执行这里');
//阻止默认行为
// e.preventDefault();//标准浏览器 谷歌内核的浏览器
//通用方式 阻止默认行为
return false;
}
</script>
</body>
</html>
在以上代码中我们给a标签绑定了点击事件，在事件函数中阻止了a链接的跳转，并在事件函数中执行了输出命令，即用JS接管了浏览器的默认行为。
该操作非常常用，希望大家熟练掌握。
|
窥视卡
雷达卡
发表于 2023-1-27 19:12:52
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-20 15:42:56
