- defaultPrevented可用于判断以后事件是否调用了event.preventDefault(), 该值在雷同事件的多个响应函数内共享状态,即fn1调用了event.preventDefault(), fn2内获取到的defaultPrevented为true
dom.addEventListener("click", function fn1(event) { event.preventDefault()})dom.addEventListener("click", function fn1(event) { console.log("event.defaultPrevented", event.defaultPrevented) // => true})
留神:因为addEventListener的响应函数依据绑定程序执行,故fn1的代码总是比fn2先执行,所以即使fn2调用了event.preventDefault(),fn1获取defaultPrevented状态时fn2的代码还没运行,返回的也是false
- preventDefault的结算在下次macroTask之前(结算:判断是否须要运行默认动作,如关上超链接),即fn1的preventDefault调用失效了,能够阻止超链接的跳转,fn2的调用不会失效,因为setTimeout的回调函数运行时preventDefault曾经结算
dom.addEventListener("click", function fn1(event) { Promise.then(() => { event.preventDefault() })})dom.addEventListener("click", function fn1(event) { setTimeout(() => { event.preventDefault() })})
联合1和2能够自定义超链接的跳转逻辑:
linkDOM.addEventListener("click", function fn1(event) { Promise.then(() => { // 判断是否阻止了默认动作,没有就能够持续运行跳转逻辑 if (!event.defaultPrevented){ // 自定义跳转逻辑,如: window.open(linkDOM.href, "_top") event.preventDefault() } })})