聆听臆懂窗棂

Web API：event.preventdefault() 有什么用？

转自：https://blog.mightyherox.me/Web-API-event-preventdefault-%E6%9C%89%E4%BB%80%E4%B9%88%E7%94%A8/


今天阅读某个项目源码时候遇到了 event.preventdefault() 这行代码。之前有遇到过几次，也去 MDN 查看了它的介绍，但还是不太理解它的实际应用场景。直到今天看到这部分源码才恍然大悟。

Event 接口的 preventDefault() 方法，告诉user agent：如果此事件没有被显式处理，它默认的动作也不应该照常执行。此事件还是继续传播，除非碰到事件侦听器调用stopPropagation() 或stopImmediatePropagation()，才停止传播。

——MDN

从 MDN 的解释我们可以了解到 event.preventdefault() 的作用是停止事件的默认动作，然后呢？它的实际应用场景是什么？

一般情况下，我们会使用 <a> 标签时候跳转到新的网页。

HTML

<a id="clickMe" href="https://blog.mightyherox.me/" target="_blank">跳转到多度橙的博客</a>

但有时候我们会利用 <a> 标签当作按钮，它本身就拥有链接的功能，但我们会为它添加类似 onclick 事件。只要在 <a> 标签触发的事件中加入 event.preventdefault() ，就不会执行它的默认动作，也就是不会再执行「链接到某个网址」动作。

HTML

<a id="clickMe" href="https://blog.mightyherox.me/" target="_blank">about Me</a>

JavaScript

document.getElementById('clickMe').onclick = (event) => {
            alert("Hey there 

nba2k2球员数据
请先登录后发表评论
  • 最新评论
  • 总共0条评论