javascript - HTML5 拖放内部子元素

标签 javascript html user-interface

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

这是我的元素:

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

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

http://jsfiddle.net/v6e5V/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 .

关于javascript - HTML5 拖放内部子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22380671/

相关文章:

javascript - eventListener函数完成后<div>的内容丢失

html - 可以控制IOS智能banner显示吗?

python - 在 tkinter 中是否可以有两列标签,其中一个标签位于下方和中间?

javascript - 流体网格布局

javascript - parseFloat 函数没有按预期工作

html - 在 100% 宽度时,我的 div 不包含它们的元素(重叠?)

java - 创建和使用 GUI 时

python - Python 中的 Tkinter - 从事件窗口中删除小部件

javascript - 如何根据其 li 调整水平菜单的大小?

JavaScript - 在循环中创建div数量