DOM 中如何阻止事件默认行为，如何判断事件否可阻止？

更多描述 追问：

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

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

Author 回答者: shfshanyue (opens in a new tab)

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

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

Author 回答者: heretic-G (opens in a new tab)

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

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

如果只是简单列举下 具体可以去 https://w3c.github.io/uievents/#events-wheelevents (opens in a new tab) 自己看看 当然不是全部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