|
1 | | -export default { |
| 1 | +const DEFAULT_EVENTS: string[] = ['click', 'touchstart']; |
| 2 | + |
| 3 | +const vClickOutside = { |
2 | 4 | install(Vue) { |
3 | 5 | Vue.directive('click-outside', { |
4 | 6 | bind: function(el, binding, vNode) { |
|
10 | 12 |
|
11 | 13 | const bubble = binding.modifiers.bubble; |
12 | 14 |
|
13 | | - const handler = (e) => { |
| 15 | + const handlerFn = (e) => { |
14 | 16 | if (bubble || (!el.contains(e.target) && el !== e.target)) { |
15 | 17 | binding.value(e); |
16 | 18 | } |
17 | 19 | }; |
18 | 20 |
|
19 | | - el.__vueClickOutside__ = handler; |
20 | | - document.addEventListener('click', handler, true); |
21 | | - document.addEventListener('touchstart', handler, true); |
| 21 | + el.__vueClickOutside__ = handlerFn; |
| 22 | + DEFAULT_EVENTS.forEach((type) => document.addEventListener(type, handlerFn)); |
22 | 23 | }, |
23 | 24 |
|
24 | 25 | unbind: function(el) { |
25 | | - if (!el.__vueClickOutside__) return; |
26 | | - |
27 | | - document.removeEventListener('click', el.__vueClickOutside__, true); |
28 | | - document.removeEventListener('touchstart', el.__vueClickOutside__, true); |
29 | | - el.__vueClickOutside__ = null; |
| 26 | + if (el.__vueClickOutside__) { |
| 27 | + DEFAULT_EVENTS.forEach((type) => document?.removeEventListener(type, el.__vueClickOutside__)); |
| 28 | + el.__vueClickOutside__ = null; |
| 29 | + } |
30 | 30 | } |
31 | 31 | }); |
32 | 32 | } |
33 | 33 | }; |
| 34 | + |
| 35 | +export default vClickOutside; |
0 commit comments