无论您是从旧的on_____
属性还是addEventListener
开始,您都知道事件驱动现代 JavaScript 中的用户体验。如果您处理过事件,您就会知道preventDefault()
和stopPropagation()
经常用于处理事件。您可能不知道的一件事:事件中有一个defaultPrevented
属性!
考虑以下代码块:
// 特定于链接 const link = document.querySelector('#my-link'); link.addEventListener('click', e => e.preventDefault()); // 更大的文档范围 document.addEventListener('click', documentClickHandler); 函数文档点击处理程序(事件){ if (event.defaultPrevented) {// 使用属性 // 如果点击已被处理,则做一件事 } 别的 { // 否则做一些新鲜的事 } }
在给定事件上preventDefault
时, defaultPrevented
属性将切换为true
。由于事件传播,事件会以这个defaultPrevented
值向上冒泡。
我已经处理了 20 年的事件,直到现在才知道这个属性的存在。 defaultPrevented
的优点在于它与事件保持一致,而无需在全球范围内跟踪它!
JavaScript Event.defaultPrevented帖子首先出现在David Walsh 博客上。
原文: https://davidwalsh.name/javascript-event-defaultprevented