Firefox 中不可选择和不可拖动之间的交互

Question

我正在 Bootstrap 中使用包含标签标题文本的 <a> 元素和关闭图标（作为跨度中的背景图像）实现标签关闭功能。

为了使它正常工作，图标必须是不可拖动的（如果您在图标上单击鼠标，然后移开，您希望这意味着“我不是故意点击”，而不是“我想要拖动图标'）。

这也意味着图标周围的文本必须是不可选择的，因为将鼠标从点击的图标上移开只会选择周围的文本，这不好。

fiddle 是我目前的解决方案，适用于 Webkit、Opera 和 IE11。但是，它不适用于 Firefox。

代码使用 Javascript 将 <a> 元素设置为不可拖动，并使用 CSS（和 unselectable）将文本设置为不可选择。

问题在于，对于 Firefox，将文本设置为不可选择实际上会再次打开拖动，因此选项卡和图标在 Firefox 中是可拖动的。在其他浏览器中，您可以单击并拖动图标（或选项卡标题）并没有任何反应。

任何想法如何解决这个问题？也许有更好的方法来处理 JS 的“不可选择”？谢谢。

Answer 1

解决方案小提琴here。该问题仅在使用draggable 属性禁用拖动时发生；小提琴在dragstart 上设置了一个事件侦听器。这适用于 FF、Chrome、Safari、Opera 和 IE11。这还具有您不需要任何 CSS 来禁用选择的优点。不过，Opera 仍然需要unselectable="on"。