阻止链接拖动，但仍允许文本突出显示

Question

我在表格中有一些数据，点击它会导航到其他地方，但人们要求能够突出显示文本，以便能够将其复制/粘贴到其他地方。由于它们是链接，HTML中的默认行为是拖动链接...我不知道为什么或如何有用，但我想在某些链接上禁用它。

TL; DR ：我希望能够突出显示链接和的文字，而不是拖动它。

下面的gif应该有助于解释我的问题。

以下方法是 NOT 我想要的：

我见过阻止突出显示＆amp;使用类似的东西拖动

<a draggable="false" href="#">

或者

.no-drag {
  user-drag: none;
}

或者这个

myElement.ondragstart = function () {
    return false;
};

但显然这不是我需要的东西。这是我想做的事情吗？

Answer 1

@Julien Grégoire's answer above让我走上正轨，但下面的代码是我最终使用的基础知识。

var clickedEl = document.getElementById("test");
var limit = 5;
var mouseMoved = false;

function resetEvents() {
    clickedEl.onmousemove = null;
    clickedEl.ondragstart = null;
    clickedEl.onmouseleave = null;
    mouseMoved = false;
}

clickedEl.onmousedown = function (downEvent) {
    if (clickedEl.attributes.href) {
        clickedEl.onclick = function (clickEvent) {
            if (mouseMoved) {
                clickEvent.preventDefault();
            }
            resetEvents();
        };
    }
    
    clickedEl.onmouseleave = function () {
        resetEvents();
    };

    clickedEl.onmousemove = function (moveEvent) {
        // This prevents the text selection being dragged
        clickedEl.ondragstart = function (dragEvent) {
            dragEvent.preventDefault();
        };

        if (Math.abs(moveEvent.x - downEvent.x) >= limit || Math.abs(moveEvent.y - downEvent.y) >= limit) {
            // If user clicks then moves the mouse within a certain limit, select the text inside
            window.getSelection().selectAllChildren(clickedEl);
            mouseMoved = true;
        }
    };

};

<a id="test" href="http://stackoverflow.com">Click or select</a>

Answer 2

您可以检测用户是否在点击后移动鼠标，如果是，则使用window.getSelection管理选择。像这样的东西：

var linkEl = document.getElementById('test')

linkEl.onmousedown = function(downEvent) {

  var clickedEl = downEvent.target;
  var mouseMoved = false;

  clickedEl.onmousemove = function() {

    // If user clicks then moves, select the whole link
    window.getSelection().selectAllChildren(clickedEl);

    // Set a flag to prevent opening the link
    mouseMoved = true;

    // Reset mousemove, else it'll run constantly
    clickedEl.onmousemove = null;

    // This is only to prevent having the text selection being dragged
    clickedEl.ondragstart = function(dragEvent) {
      dragEvent.preventDefault();
    }
  }

  if (mouseMoved) {
    // If mouse has moved, prevent default
    downEvent.preventDefault();
  }
}

<a draggable="false" id="test" href="http://stackoverflow.com">Click or select</a>

Answer 3

在谷歌浏览器中这是有效的

user-select: none;
-webkit-user-drag: none;

Answer 4

这是对我有用的最简单的解决方案。您可以将 '*' 改为 'a'。

*, *::after, *::before {
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-app-region: no-drag;    
}