refactor(clickoutside): dismiss click mousedown inside element

This commit is contained in:
07akioni 2019-08-29 11:16:08 +08:00
parent 8768320638
commit 3a2781bf3c
3 changed files with 14 additions and 24 deletions

View File

@ -12,8 +12,6 @@
<n-scrollbar
ref="scrollbar"
@scroll="handleMenuScroll"
@scrollstart="handleMenuScrollStart"
@scrollend="handleMenuScrollEnd"
>
<div class="n-base-select-menu__item-wrapper">
<transition name="n-base-select-menu__light-bar--transition">
@ -165,12 +163,6 @@ export default {
}
},
methods: {
handleMenuScrollStart () {
this.$emit('menu-scroll-start')
},
handleMenuScrollEnd () {
this.$emit('menu-scroll-end')
},
handleMenuScroll (e, scrollContainer, scrollContent) {
this.$emit('menu-scroll', e, scrollContainer, scrollContent)
},

View File

@ -60,8 +60,6 @@
:is-selected="isSelected"
@menu-toggle-option="handleToggleOption"
@menu-scroll="handleMenuScroll"
@menu-scroll-start="handleMenuScrollStart"
@menu-scroll-end="handleMenuScrollEnd"
/>
</transition>
</div>
@ -379,14 +377,6 @@ export default {
/**
* scroll events on menu
*/
handleMenuScrollStart () {
this.scrolling = true
},
handleMenuScrollEnd () {
window.setTimeout(() => {
this.scrolling = false
}, 0)
},
handleMenuScroll (e, scrollContainer, scrollContent) {
this.$emit('scroll', e, scrollContainer, scrollContent)
},

View File

@ -3,9 +3,14 @@ class ClickOutsideDelegate {
console.debug('[ClickOutsideDelegate]: Ctor called')
this.handlers = new Map()
this.handlerCount = 0
this.handleClickOutside = this.handleClickOutside.bind(this)
this.mouseDownTarget = null
this.handleMouseUpOutside = this.handleMouseUpOutside.bind(this)
this.handleMouseDown = this.handleMouseDown.bind(this)
}
handleClickOutside (e) {
handleMouseDown (e) {
this.mouseDownTarget = e.target
}
handleMouseUpOutside (e) {
const target = e.target
for (const [handler, { els, once }] of this.handlers) {
let existElContainTarget = false
@ -13,11 +18,11 @@ class ClickOutsideDelegate {
if (el) {
if (typeof el === 'function') {
const unwrappedEl = el()
if (unwrappedEl && unwrappedEl.contains(target)) {
if (unwrappedEl && (unwrappedEl.contains(target) || unwrappedEl.contains(this.mouseDownTarget))) {
existElContainTarget = true
break
}
} else if (el.contains(target)) {
} else if (el.contains(target) || el.contains(this.mouseDownTarget)) {
existElContainTarget = true
break
}
@ -45,7 +50,9 @@ class ClickOutsideDelegate {
}
if (!this.handlerCount) {
console.debug('[ClickOutsideDelegate]: remove handler from window')
window.removeEventListener('click', this.handleClickOutside)
window.removeEventListener('mouseup', this.handleMouseUpOutside)
window.removeEventListener('mousedown', this.handleMouseDown)
this.mouseDownTarget = null
this.handlers = new Map()
}
}
@ -61,7 +68,8 @@ class ClickOutsideDelegate {
}
if (!this.handlerCount) {
console.debug('[ClickOutsideDelegate]: add handler to window')
window.addEventListener('click', this.handleClickOutside)
window.addEventListener('mouseup', this.handleMouseUpOutside)
window.addEventListener('mousedown', this.handleMouseDown)
}
++this.handlerCount
this.handlers.set(handler, { els, once })