Question

简单的问题，当启用带有DnD的元素时，如果你有一个内部子元素（例如字体很棒的元素），如果单击内部元素，似乎无法拖动父元素。这意味着在拖动元素时，用户必须单击子项周围的填充。

这是我的元素：

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

以下演示了拖动时的毛刺行为。单击图标本身时尝试并拖动。我最近使用的是Firefox，不确定其他浏览器是否会出现同样的行为。

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

由于

Answer 1

解决方案是将pointer-events: none添加到子元素中，这将执行以下操作：

元素永远不是鼠标事件的目标;但是，如果这些后代将指针事件设置为某个其他值，则鼠标事件可能会以其后代元素为目标。在这些情况下，鼠标事件将在事件捕获/冒泡阶段期间在发送/来自后代的路径上触发此父元素上的事件侦听器。