javascript - HTML5 拖放内部子元素

Question

简单的问题，当使用 DnD 启用元素时，如果您有内部子元素(例如 font-awesome 元素)，则如果单击内部子元素，则似乎无法拖动父元素。这意味着当拖动元素时，用户必须单击子元素周围的填充。

这是我的元素:

<a id="dragme" draggable="true"><i class="fa fa-search"></i></a>

下面演示了拖动时的故障行为。当您单击图标本身时尝试拖动。我正在使用最新的 Firefox，不确定其他浏览器是否会出现相同的行为。

http://jsfiddle.net/v6e5V/1/

有关解决此问题以使整个元素可拖动的任何提示吗？

谢谢

Answer 1

解决办法是添加pointer-events: none到子元素将执行以下操作:

The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.

参见updated jsFiddle .