vue3怎么能像vue2的$on一样，实现全局拦截点击事件呢？

[elarbor]

之前vue2项目很好实现，可是vue3 原型链上没有$on了，通过原生的document.addEventListener('click', fn); 点击事件也能监听到但拦截不到。
我想像https://blog.csdn.net/qq_42618566/article/details/124670043 一样拦截并且重构点击事件逻辑

[GFLEE]

https://github.com/developit/mitt

[elarbor]

中央事件总线。但是这个能像vue2那样只在入口文件放个代码，然后哪里都不用动吗？

影响面超级小，就一处写了个代码，整个项目的点击事件都拦截了

[Wei-Ba]

都改原型链了直接把EventTarget的改了不就好了么

[elarbor]

不知道为什么，一搬到我这项目就不行了😂

import { createApp } from 'vue'
import App from './App'
import store from './store'
// import router from './router'
import directive from './directive' // 注册指令
import "./config/elementUI.js"
import 'element-plus/dist/index.css'
import '@/assets/styles/index.scss' // global css
import 'uno.css'
import plugins from './plugins' // plugins
// svg图标
import 'virtual:svg-icons-register'
// import SvgIcon from '@/components/SvgIcon'
import elementIcons from '@/components/SvgIcon/svgicon'
import './router/guards' // permission control










const debounceFn = (fn, wait) => {
  let handle = null
  const runner = (args) => {
    return setTimeout(() => {
      handle = null
      fn(...args)
    }, wait)
  }
  return (...args) => {
    if (handle != null) {
      clearTimeout(handle)
      handle = null
      console.log('debounced')
    }
    handle = runner(args)
  }
}

const origin = EventTarget // or Element ...
const rawAddEventListener = origin.prototype.addEventListener
const rawRemoveEventListener = origin.prototype.removeEventListener

const resolveEventCallback = (func) => {
  if (typeof func === 'object') return func.handleEvent
  return func
}
const getEventMapping = (target) => {
  let result = Reflect.get(target, '__eventMapping__')
  if (!result) {
    result = new WeakMap()
    Reflect.set(target, '__eventMapping__', result)
  }
  return result
}
origin.prototype.addEventListener = function (name, callback, options) {
  if (callback === null) return
  const eventListenerMapping = getEventMapping(this)
  if (!eventListenerMapping.has(callback))
    eventListenerMapping.set(callback, debounceFn(resolveEventCallback(callback), 500))
  const func = getEventMapping(this).get(callback) || callback
  return rawAddEventListener.call(this, name, func, options)
}
origin.prototype.removeEventListener = function (name, callback, options) {
  if (callback === null) return
  const func = getEventMapping(this).get(callback) ?? callback
  return rawRemoveEventListener.call(this, name, func, options)
}




const app = createApp(App)
app.use(router)
app.use(store)
app.use(plugins)
app.use(elementIcons)
directive(app)
app.mount('#app')



// 消除后续影响
origin.prototype.addEventListener = rawAddEventListener
origin.prototype.removeEventListener = rawRemoveEventListener

[Wei-Ba]

不知道为什么，一搬到我这项目就不行了😂

import { createApp } from 'vue'
import App from './App'
import store from './store'
// import router from './router'
import directive from './directive' // 注册指令
import "./config/elementUI.js"
import 'element-plus/dist/index.css'
import '@/assets/styles/index.scss' // global css
import 'uno.css'
import plugins from './plugins' // plugins
// svg图标
import 'virtual:svg-icons-register'
// import SvgIcon from '@/components/SvgIcon'
import elementIcons from '@/components/SvgIcon/svgicon'
import './router/guards' // permission control










const debounceFn = (fn, wait) => {
  let handle = null
  const runner = (args) => {
    return setTimeout(() => {
      handle = null
      fn(...args)
    }, wait)
  }
  return (...args) => {
    if (handle != null) {
      clearTimeout(handle)
      handle = null
      console.log('debounced')
    }
    handle = runner(args)
  }
}

const origin = EventTarget // or Element ...
const rawAddEventListener = origin.prototype.addEventListener
const rawRemoveEventListener = origin.prototype.removeEventListener

const resolveEventCallback = (func) => {
  if (typeof func === 'object') return func.handleEvent
  return func
}
const getEventMapping = (target) => {
  let result = Reflect.get(target, '__eventMapping__')
  if (!result) {
    result = new WeakMap()
    Reflect.set(target, '__eventMapping__', result)
  }
  return result
}
origin.prototype.addEventListener = function (name, callback, options) {
  if (callback === null) return
  const eventListenerMapping = getEventMapping(this)
  if (!eventListenerMapping.has(callback))
    eventListenerMapping.set(callback, debounceFn(resolveEventCallback(callback), 500))
  const func = getEventMapping(this).get(callback) || callback
  return rawAddEventListener.call(this, name, func, options)
}
origin.prototype.removeEventListener = function (name, callback, options) {
  if (callback === null) return
  const func = getEventMapping(this).get(callback) ?? callback
  return rawRemoveEventListener.call(this, name, func, options)
}




const app = createApp(App)
app.use(router)
app.use(store)
app.use(plugins)
app.use(elementIcons)
directive(app)
app.mount('#app')



// 消除后续影响
origin.prototype.addEventListener = rawAddEventListener
origin.prototype.removeEventListener = rawRemoveEventListener

所以弄个demo发出来啊

[Wei-Ba]

这种用新给的那种就好了，这项目元素全是后续创建的

[elarbor]

找到了https://tianbianyu.com/316/ 发现css的pointerEvents也能控制住，但是重复触发😂

[Wei-Ba]

找到了https://tianbianyu.com/316/ 发现css的pointerEvents也能控制住，但是重复触发😂

↑↑↑

// file: main.ts
// import ...
import { debounce } from 'lodash'

/** 可以替换为Element.prototype,window等等 */
const prototype = EventTarget.prototype // or Element ...
// 保存原始上的addEventListener和removeEventListener方法
const rawAddEventListener = prototype.addEventListener
const rawRemoveEventListener = prototype.removeEventListener

/**
 * 获取实际的回调函数(因为EventTarget的callback参数是EventListenerOrEventListenerObject类型的)
 * @param func
 */
const resolveEventCallback = (func: EventListenerOrEventListenerObject): EventListener => {
  if (typeof func === 'object') return func.handleEvent
  return func
}
/**
 * 事件监听器的映射表
 */
const getEventMapping = (target: EventTarget): WeakMap<EventListenerOrEventListenerObject, EventListener> => {
  let result = Reflect.get(target, '__eventMapping__')
  if (!result) {
    result = new WeakMap()
    Reflect.set(target, '__eventMapping__', result)
  }
  return result
}

// 重写addEventListener和removeEventListener方法
prototype.addEventListener = function (name, callback, options) {
  if (callback === null) return
  // 放行非vue绑定的事件
  // vue添加的元素事件回调函数名称为`invoker`, 并且含有 `value` 和 `attached`属性
  // 具体查看 https://github.com/vuejs/core/blob/main/packages/runtime-dom/src/modules/events.ts
  if (!Reflect.has(callback, 'value') && !Reflect.has(callback, 'attached'))
    return Reflect.apply(rawAddEventListener, this, [name, callback, options])
  const eventListenerMapping = getEventMapping(this)
  if (!eventListenerMapping.has(callback))
    eventListenerMapping.set(callback, debounce(resolveEventCallback(callback), 500))
  const func = eventListenerMapping.get(callback)!
  return Reflect.apply(rawAddEventListener, this, [name, func, options])
}
prototype.removeEventListener = function (name, callback, options) {
  if (callback === null) return
  const func = getEventMapping(this).get(callback) ?? callback
  return Reflect.apply(rawRemoveEventListener, this, [name, func, options])
}

// vue 相关内容
createApp(App).mount('#app')

[hzdjulytech]

你们能拿到原始事件回调的返回值吗 你这
origin.prototype.addEventListener = rawAddEventListener
origin.prototype.removeEventListener = rawRemoveEventListener 不是改回去了吗 签名白改了 后面调用的适合还是没改的