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

Question

我想在一个包含子元素 input type "range" 的 div 上执行拖动操作，但由于其父 div 已经注册了拖动事件，在 FIREFOX 中我无法移动 range 元素，但它可以在 Chrome 中正常工作（为什么？请告诉我原因）。请提供解决方案。 http://jsbin.com/ASabAFuw/8/edit

- rohitpal

Answer 1

看起来是浏览器的bug，在Firefox中，滑块甚至没有接收到dragstart事件。如果有的话，您就可以防止冒泡。

但是，如果活动元素是输入框（也许您还需要检查链接或文本区域），则可以通过从dragstart处理程序返回false来阻止拖放：

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

另外还有一个问题： onSliderChange 调用了 event.preventDefault()，所以当你在Chrome中释放鼠标按钮后，滑块仍然会继续移动，并在Firefox中恢复到先前的位置。

- Alexey Lebedev

---

是的，在那种情况下可以防止冒泡。我现在已经在onSliderChange()中注释了event.preventDefault()，并添加了document.activeElement.tagName == 'INPUT'，现在它可以正常工作了。谢谢Alexey。 - rohitpal

活动元素似乎总是出现在body上。 - Jason G

当我在后续函数中处理此事件时，使用额外的 event.preventDefault() 最终解决了它。谢谢！ - xpuu