リンクのドラッグを防ぎますが、テキストのハイライト表示を許可します

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>