浏览器的默认行为和阻止方案

·  阅读 480
浏览器的默认行为和阻止方案

「这是我参与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标签的默认事件是否被阻止了?

image-20211128232519951

运行之后,会发现,执行了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():阻止事件触发后默认动作的发生。

参考资料:

Browser default actions


🎨【点赞】【关注】不迷路,更多前端干货等你解锁

往期推荐

👉 一起来看看JS的原型继承

👉 JS中的getter和setter你会用吗?

👉 深入理解ES6箭头对象

👉 JS的装饰器模式实例分析

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改