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

Question

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

TL; DR:我希望能够突出显示链接的文本而不是拖动它.

下面的GIF应该有助于解释我的问题.

以下方法不是我想要的:

我已经看到了一些例子,可以阻止使用类似的东西进行突出显示和拖动

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

或这个

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

或这个

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

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

Answer 1

在 Google Chrome 中这有效

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

Answer 2

我回答得太晚了，但我就把它留在这里：

只需放入标签draggable="false"内即可，<a>

<a draggable="false" href="./"></a>

然后在 CSS 中输入：

body {
        -webkit-user-drag: none;
}

Answer 3

@Julien Grégoire 上面的回答让我走上了正确的道路，但下面的代码是我最终使用的基础知识。

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>