「这是我参与11月更文挑战的第27天，活动详情查看：2021最后一次更文挑战」
浏览器默认行为是什么？
首先我们需要知道，什么叫浏览器的默认行为?
浏览器的默认行为就是，没有给浏览器添加事件，而在一定条件下浏览器自己触发的事件的行为。
如：
- 点击一个链接。（会自动触发该导航（navigation）跳到该 URL）
- 点击表单的提交按钮。（会触发提交到服务器的行为）
- 在文本上按下鼠标按钮并移动。（会选择文本）
有的时候，我们不希望发生浏览器默认的行为，而是自己定义的其他行为，这个时候我们就需要先阻止浏览器的行为。
阻止浏览器行为
阻止浏览器默认行为也有两种方法
- 使用
event.preventDefault()，如：
<a href="https://www.baidu.com/" onclick="event.preventDefault()">此时点击不会跳转</a>
- 如果处理程序用的是
on<event>（而不是addEventListener）分配的，那返回false也同样有效，如：
<a href="https://www.baidu.com/" onclick="return false">此时点击不会跳转</a>
扩展
📖 问题一：
现在来看这样一段代码，我们同样是通过HTML属性来分发处理器，只不过是在函数中返回了false；
那么，问：a标签的默认事件是否被阻止了？
运行之后，会发现，执行了alert，同时还是进行了链接跳转。为什么呢？
因为：当浏览器读取诸如 onclick 之类的 on* 特性（attribute）时，浏览器会根据其内容创建对应的处理程序。对于 onclick="handler()" 来说，函数其实是
function(event) {
demo() // onclick 的内容
}
可以看到 demo() 的返回值并没有被使用，也没有对结果产生影响。所以通过这种方式分配的事件，可以这样写，现在a标签的默认行为就被成功阻止了。
<a href="https://www.baidu.com/" onclick="return demo()">点击</a>
<script>
function demo() {
alert( "点击链接" );
return false;
}
</script>
📖 问题二：
现在如果是通过 DOM 属性（property）on<event> 来分配处理程序，代码是这样的。
那么，问：a标签的默认事件是否被阻止了？
<a href="https://www.baidu.com/" id="linkDemo">点击</a>
<script>
linkDemo.onclick = function(event){
alert('点击了链接');
return false;
}
</script>
答案是：成功，这样写是正确的✅。
相关内容：👉 浏览器中的事件介绍
注意
💥 1、存在的问题
我们原本的问题是，希望执行的是自定义事件，阻止浏览器默认的行为，之前的方法已经解决了这个问题。但是现在会出现一个新的问题，比如：
<input type='text' onmousedown="return false;">
我们这里，阻止了鼠标按下的浏览器的默认事件，但是你会发现，此时的input不能获取到焦点了。
这是因为：某些事件会相互转化。如果我们阻止了第一个事件，那就没有第二个事件了。（如我们这个示例，在 <input> 字段上的 mousedown 会导致在其中获得焦点，以及 focus 事件。如果我们阻止 mousedown 事件，在这就没有焦点了）
💥 2、event.stopPropagation() 和 event.preventDefault()
注意它们是两个不同的东西，它们之间毫无联系
event.stopPropagation()【不建议使用】：阻止捕获和冒泡阶段中当前事件的进一步传播。但是，它不能防止任何默认行为的发生； 例如，对链接的点击仍会被处理。event.preventDefault()：阻止事件触发后默认动作的发生。
参考资料：
🎨【点赞】【关注】不迷路，更多前端干货等你解锁
往期推荐
