[筆記] Nuxt 解決 non-passive event listener 問題 @地瓜大的飛翔旅程

章節連結

內容
程式碼

此為用 Google Chrome 開發或使用時會遇到，這邊筆記下於 Nuxt 上的解決方法。

內容

承接 [筆記] 解決 Google Chrome 的 Added non-passive event listener to a scroll-blocking event 錯誤，將此方法改寫為 Nuxt Plugin 的型式，於客戶端啟用即可

程式碼

interface EventTargetWithFunc extends EventTarget {
  func?: typeof EventTarget.prototype.addEventListener
}

function overrideAddEventListener() {
  if (import.meta.server) return
  if (typeof EventTarget !== 'undefined') {
    const originalAddEventListener = EventTarget.prototype.addEventListener
    EventTarget.prototype.addEventListener = function (
      this: EventTargetWithFunc,
      type,
      fn,
      options,
    ) {
      if (typeof options !== 'boolean') {
        options = options || {}
        options.passive = false
      }
      return originalAddEventListener.call(this, type, fn, options)
    }
  }
}

export default defineNuxtPlugin(() => {
  overrideAddEventListener()
})

interface EventTargetWithFunc extends EventTarget {

func?: typeof EventTarget.prototype.addEventListener

}

function overrideAddEventListener() {

if (import.meta.server) return

if (typeof EventTarget !== 'undefined') {

const originalAddEventListener = EventTarget.prototype.addEventListener

EventTarget.prototype.addEventListener = function (

this: EventTargetWithFunc,

type,

fn,

options,

) {

if (typeof options !== 'boolean') {

options = options || {}

options.passive = false

}

return originalAddEventListener.call(this, type, fn, options)

}

export default defineNuxtPlugin(() => {

overrideAddEventListener()

})

按讚加入粉絲團

內容

程式碼

延伸閱讀