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

Question

现在有这样的需求，如下图蓝色框弹窗通过vue自定义指令绑定了onmousedown（pc）/ontouchstart（移动）事件，实现自由拖拉。

问题：

其子孙节点中又有一个滑块模块，可以拖拉，然鹅前面父节点的onmousedown-onmousemove方法的影响，导致下图红色框内滑块无法拖拉

<div class="dialog-box" v-selfDrag="'v-slider__thumb-label primary'"></div>

drag.js

bind (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种方法之间的不同