javascript - 父级可拖动和子级输入类型范围之间的事件冲突

我试图在包含子输入类型“range”元素的div上执行拖动操作，但是由于其父div已注册了拖动事件，因此我无法在FIREFOX中滑动range元素，但可以在chrome中使用(为什么？ ..请也告诉这个。.)。请提出解决方案。

http://jsbin.com/ASabAFuw/8/edit

最佳答案

看起来像一个浏览器错误，滑块甚至在Firefox中都没有收到dragstart事件。如果确实如此，您将能够防止起泡。

但是，如果 Activity 元素是输入，则可以通过从dragstart处理程序返回false来阻止拖放(可能还需要检查链接或文本区域):

function dragStartCallback(event) {
  if (document.activeElement.tagName == 'INPUT') {
      return false; // block dragging
  }
  event.dataTransfer.setData('text', ' Dropped')
}

还有另一个问题:onSliderChange调用event.preventDefault()，因此当您释放鼠标按钮时，滑块会继续在Chrome中移动，并恢复到Firefox中的上一个位置。