极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。
山月训练营之面试直通车 服务上线了,从准备简历、八股文准备、项目经历准备、面试、面经、面经解答、主观问题答复、谈薪再到入职的一条龙服务。

# DOM 中如何阻止事件默认行为,如何判断事件否可阻止?

更多描述

追问:

  1. 有哪些事件可阻止,哪些事件不可阻止?

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 556 (opens new window)

  • e.preventDefault(): 取消事件
  • e.cancelable: 事件是否可取消

如果 addEventListener 第三个参数 { passive: true}preventDefault 将会会无效

[补充] 如果 passive 设置为 true 那其实 preventDefault 就会无效 因为 passive 为 true 会导致初始化的时候 cancelable 为 false

event.preventDefault 不能取消的没有固定哪一个类 主要是在规范中有没有定义 Default Action 还有即使是定义了 Default Action 那在实际中可能也会在不同的触发时间存在或不存在默认行为 所以可以依赖 event.cancelable 来处理 Default Action

如果只是简单列举下 具体可以去 https://w3c.github.io/uievents/#events-wheelevents 自己看看 当然不是全部 event 这里都有我就不都粘这里了

UI Event

load
unload
abort
error
select

Focus Event

blur
focus
focusin
focusout

Mouse Event

dbclick
mousedown   部分情况
mouseenter
moouseleave
moousemove
mouseout
mouseleave
mouseup     鼠标左右

Input Event

input

Keyboard

keydown 部分情况
keyup

Composition Event

compositionupdate
compositionend

Touch Event

touchstart
touchend    部分情况
touchmove
touchcancel

scroll 规范中没有定义他的 Event 归属 其实算是 wheel 的后续操作

检查能不能取消默认事件可以使用 cancelable

是否被取消了默认事件 defaultPrevented

取消默认 preventDefault 或者 e.returnValue = false

正常一个 event 是带有 7 个 tag

stop propagation flag => stopPropagation | cancelBubble | stopImmediatePropagation

stop immediate propagation flag => stopImmediatePropagation

canceled flag => returnValue 设置 false 会导致这里是 false | preventDefault

in passive listener flag => passive 是在 addEventListener 的第三个 config 里面可以设置

composed flag => 用来指示该事件是否可以从 Shadow DOM 传递到一般的 DOM

initialized flag 没有理解

dispatch flag

Last Updated: 2/13/2023, 10:50:25 AM