あなたが知らないpreventDefault

1362 ワード
javascript 先端 dom
  • default Prvent tedは、同じイベントの複数の応答関数内で共有された状態、すなわちfn 1がevent.prevent Default()、fn 2内で取得されたdefault Prvent tedがtrue
    • を呼び出したかどうかを判断するために使用されてもよい.
    dom.addEventListener("click", function fn1(event) {
    event.preventDefault()
}, false)
dom.addEventListener("click", function fn1(event) {
    console.log("event.defaultPrevented", event.defaultPrevented) // => true
}, false)
      ：  addEventListener             ， fn1      fn2   ，    fn2   event.preventDefault()，fn1  defaultPrevented   fn2       ，     false
  • preventDefaultの決済は次のmacroTaskの前に行われます.すなわち、fn 1のpreventDefault呼び出しが有効になりました.ハイパーリンクのジャンプを阻止することができます.fn 2の呼び出しは有効になりません.
    dom.addEventListener("click", function fn1(event) {
    queueMicrotask(() => {
        event.preventDefault()
    })
})
dom.addEventListener("click", function fn1(event) {
    setTimeout(() => {
        event.preventDefault()
    })
})
    1と2を結合すると、ハイパーリンクのジャンプロジックをカスタマイズできます.
    linkDOM.addEventListener("click", function fn1(event) {
    queueMicrotask(() => {
        //            ，             
        if (!event.defaultPrevented){
            //        ， : window.open(linkDOM.href, "_top")
            event.preventDefault()
        }
        
    })
}, false)
    • selenium