Firefox中不可选择和不可分割的交互

Question

我在Bootstrap中使用包含标签标题文本的<a>元素实现标签关闭功能，以及关闭图标（作为范围中的背景图像）。

为了使这项工作顺利进行，图标必须是不可分割的（如果你点击图标上的鼠标，然后离开，你想要这意味着＆＃39;我没有意思点击＆＃39;而不是＆＃39;我想拖动图标＆＃39;）。

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

这个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"。