在Firefox中unselectable和undraggable之间的交互 [英] Interaction between unselectable and undraggable in Firefox

问题描述

我在Bootstrap中使用包含标签标题文本的< a> 元素实现了tab关闭功能，以及关闭图标在一个跨度）。

I'm implementing tab close functionality in Bootstrap with an <a> element which contains the tab title text, as well as a close icon (as a background image in a span).

为了使这个工作正常，图标必须是不可拖动的（如果你点击鼠标的图标，然后离开，你想要这个意思是我不是要点击，而不是我想拖动图标。）

To make this work well, the icon must be undraggable (if you click the mouse on the icon, and then move away, you want this to mean 'I didn't mean to click', rather than 'I want to drag the icon').

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

This also means that the text around the icon must be unselectable, since moving the mouse away from a clicked icon will just select the surrounding text, which isn't good.

这 fiddle 是我当前的解决方案，它适用于Webkit，Opera和IE11。

This fiddle is my current solution, which works for Webkit, Opera, and IE11. However, it doesn't work for Firefox.

该代码使用Javascript来设置< a> 元素to undraggable，and CSS（and unselectable ）将文本设置为不可选。

The code uses Javascript to set the <a> element to undraggable, and CSS (and unselectable) to set the text unselectable.

问题是，对于Firefox ，将文本设置为不可选实际上再次打开拖动，因此在Firefox中可以拖动选项卡和图标。在其他浏览器中，您可以点击并拖动图标（或标签标题），并且什么也不会发生。

The problem is that, for Firefox, setting the text unselectable actually turns on dragging again, so the tab and the icon are draggable in Firefox. In the other browsers, you can click and drag on the icon (or the tab title) and nothing happens.

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

Any ideas how to fix this? Perhaps there's a better way to handle 'unselectable' with JS? Thanks.

推荐答案

解决方案fiddle 这里。仅当使用 draggable 属性来禁用拖动时才会出现此问题;小提琴在 dragstart 上设置一个事件侦听器。这适用于FF，Chrome，Safari，Opera和IE11。这也有优点，你不需要任何CSS来禁用选择。但是Opera仍然需要 unselectable =on。

Solution fiddle here. The problem only happens when using the draggable property to disable dragging; the fiddle sets an event listener on dragstart instead. This works on FF, Chrome, Safari, Opera, and IE11. This also has the advantage that you don't need any CSS to disable selection. Opera still needs unselectable="on", though.

这篇关于在Firefox中unselectable和undraggable之间的交互的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！