javascript - Firefox 中 unselectable 和 undraggable 之间的交互

Question

我正在使用 <a> 在 Bootstrap 中实现选项卡关闭功能包含选项卡标题文本以及关闭图标(作为跨度中的背景图像)的元素。

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

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

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

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

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

有什么办法解决这个问题吗？也许有更好的方法来处理 JS 的“不可选择”？谢谢。

Answer 1

解决方案 here .只有在使用 draggable 属性禁用拖动时才会出现此问题； fiddle 改为在 dragstart 上设置事件监听器。这适用于 FF、Chrome、Safari、Opera 和 IE11。这还有一个优点，即您不需要任何 CSS 来禁用选择。不过，Opera 仍然需要 unselectable="on"。