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

Question

我正在尝试对包含子输入类型“range”元素的div执行拖动操作，但由于其父div已注册拖动事件，我无法在FIREFOX中滑动范围元素但它在chrome中有效（为什么？..请告诉这个......）。请提出解决方案。

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

Answer 1

看起来像浏览器错误，滑块甚至没有在Firefox中收到dragstart事件。如果确实如此，你就能防止冒泡。

但如果活动元素是输入（也许你还需要检查链接或te​​xtareas），你可以通过从dragstart处理程序返回false来阻止拖放：

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

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