关于javascript:你不知道的preventDefault

1次阅读

共计 990 个字符，预计需要花费 3 分钟才能阅读完成。

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()}
        
    })
})

正文完