現(xiàn)在有這樣的需求,如下圖藍色框彈窗通過vue自定義指令綁定了onmousedown(pc)/ontouchstart(移動)事件,實現(xiàn)自由拖拉。問題:其子孫節(jié)點中又有一個滑塊模塊,可以拖拉,然鵝前面父節(jié)點的onmousedown-onmousemove方法的影響,導(dǎo)致下圖紅色框內(nèi)滑塊無法拖拉<div class="dialog-box" v-selfDrag="'v-slider__thumb-label primary'"></div>drag.jsbind (el, binding, vnode) {
el.onmousedown = (ev) => { if (!ev.target.className || ev.target.className === binding.value) return
let disX = ev.clientX - el.offsetLeft let disY = ev.clientY - el.offsetTop document.onmousemove = (ev) => { let l = ev.clientX - disX let t = ev.clientY - disY
el.style.left = l + 'px'
el.style.top = t + 'px'
} document.onmouseup = () => { document.onmousemove = null
document.onmouseup = null
}
}
}勉強的解決方法(前面代碼):(1)提前確定不需要拖拉的節(jié)點className;(2)鼠標綁定onmousedown的節(jié)點,綁定其target.className是否為className這是方法非常愚蠢,有咩更高效的方法?
- 1 回答
- 0 關(guān)注
- 1115 瀏覽
添加回答
舉報
0/150
提交
取消