如何让父节点绑定onmousedown不影响子孙节点的拖拉事件

Question

现在有这样的需求，如下图蓝色框弹窗通过vue自定义指令绑定了onmousedown（pc）/ontouchstart（移动）事件，实现自由拖拉。问题：其子孙节点中又有一个滑块模块，可以拖拉，然鹅前面父节点的onmousedown-onmousemove方法的影响，导致下图红色框内滑块无法拖拉<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)提前确定不需要拖拉的节点className;(2)鼠标绑定onmousedown的节点，绑定其target.className是否为className这是方法非常愚蠢，有咩更高效的方法？

Answer 1

js冒泡，你可以禁止掉，event.stopPropagation();

JS阻止事件冒泡的3种方法之间的不同