Взаимодействие между невыбираемым и неотрывным в Firefox

Я реализую функцию закрытия вкладок в Bootstrap с элементом <a> который содержит текст заголовка вкладки, а также значок закрытия (в качестве фонового изображения в промежутке).

Чтобы сделать эту работу хорошо, значок должен быть недоступен (если вы нажмете мышью на значке, а затем отпустите, вы хотите, чтобы это означало "я не хотел нажимать", а не "Я хочу перетащить значок ").

Это также означает, что текст вокруг значка должен быть не поддающимся выбору, так как перемещение мыши от щелкнутого значка просто выберет окружающий текст, что не очень хорошо.

Эта скрипка - мое текущее решение, которое работает для Webkit, Opera и IE11. Однако Firefox не работает.

В коде используется Javascript, чтобы установить <a> -элемент в unraggable и CSS (и unselectable), чтобы установить текст не поддающимся выбору.

Проблема заключается в том, что для Firefox установка текста, который не выбирается, на самом деле снова включает перетаскивание, поэтому вкладка и значок перетаскиваются в Firefox. В других браузерах вы можете щелкнуть и перетащить значок (или заголовок вкладки), и ничего не произойдет.

Любые идеи, как это исправить? Возможно, есть лучший способ справиться с "невыбираемым" с JS? Благодарю.