Предотвратите перетаскивание ссылки, но все же разрешите выделение текста

Question

У меня есть некоторые данные в таблице, где щелчок по ней будет перемещаться по вам в другом месте, но люди запрашивают возможность выделить текст, чтобы иметь возможность копировать/вставлять его в другое место. Поскольку они являются ссылками, поведение по умолчанию в HTML - это перетащить ссылку ... Я не знаю, почему и как это полезно, но я хочу отключить ее по определенным ссылкам.

TL; DR: Я хочу, чтобы иметь возможность выделить текст ссылки и не перетащить его.

Ниже приведен пример gif, который поможет объяснить мою проблему.

следующие методы НЕ что я хочу:

Я видел примеры, которые предотвратить как выделение & перетаскивание используя что-то вроде этого

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

или это

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

Или это

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

Но очевидно, что это не то, что мне нужно here.Is, что я хочу, это возможно сделать?

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>