我怎樣才能防止用光標拖動文本/元素選擇

我做了一個分頁控制，我注意到，雖然點擊按鈕，很容易意外地選擇個別圖像和文字。是否有可能防止這種情況發生？我怎樣才能防止用光標拖動文本/元素選擇

澄清選擇我的意思是用鼠標突出顯示。（嘗試將鼠標從屏幕的一側拖到另一側。）

如果嘗試突出顯示此網格中的文本/控件，則無法選擇它。這是如何完成的？ Link

來源

2011-03-25 The Muffin Man

可能的h ttp：//stackoverflow.com/questions/2700000/how-to-disable-text-selection-using-jquery – kapa 2011-03-25 07:55:56

另一個可能的重複http：// stackoverflow。com/questions/2326004/prevent-selection-in-html – 2011-03-25 08:02:44

拖動和選擇鼠標按下事件初始化和更新隨後的鼠標移動。當你要處理的事件，開始拖動，或跟隨鼠標，取消事件的冒泡，並覆蓋默認的瀏覽器返回：

這樣的事情在你開始拖動鼠標按下並移動handlers-

e=e || window.event; 
pauseEvent(e);

function pauseEvent(e){ 
    if(e.stopPropagation) e.stopPropagation(); 
    if(e.preventDefault) e.preventDefault(); 
    e.cancelBubble=true; 
    e.returnValue=false; 
    return false; 
}

來源

2011-03-25 12:23:43 kennebec

爲什麼我們還需要停止冒泡......是不是e.preventDefault（）就夠了？ – 2014-11-25 08:31:47

是的，e.preventDefault（）應該是現代瀏覽器所需要的。其餘的代碼是多餘的：window.event適用於較老版本的IE，但由於這些事件沒有preventDefault方法，並且返回false不會在pauseEvent函數調用時返回......它不會執行任何操作（甚至在2011年也沒有）。 – Sjeiti 2015-06-29 21:15:12

CSS：'user-select：none;'是我使用的。沒有必要JS來解決這個問題，我應該想想 – Ryan 2017-12-25 19:16:49

試試這個：

document.onselectstart = function() 
{ 
    window.getSelection().removeAllRanges(); 
};

來源

2011-03-25 07:53:18

我該如何修改它只適用於特定的div？ – 2011-03-25 07:56:26

試試這個：$（'yourDivSelector'）。getSelection（）。removeAllRanges（） – 2011-03-25 07:58:12

'selectstart'事件在Firefox中不存在。 – 2011-03-25 09:17:23

這可以使用在大多數瀏覽器CSS和unselectable的expando在IE瀏覽器來實現。看到我的答案在這裏：How to disable text selection highlighting using CSS?

來源

2011-03-25 09:43:50

這是比接受的更好的答案，完全繞過事件 – rtpax 2016-12-14 05:03:00

我想評論，但我沒有足夠的聲望。使用來自@kennebec的建議功能解決了我的JavaScript拖動庫中的問題。它的工作無懈可擊。

function pauseEvent(e){ 
    if(e.stopPropagation) e.stopPropagation(); 
    if(e.preventDefault) e.preventDefault(); 
    e.cancelBubble=true; 
    e.returnValue=false; 
    return false; 
}

我把它叫做我的鼠標按下鼠標移動和自定義函數後，馬上我可以承認我點擊了正確的元素。如果我只是在函數頂部調用它，我只需要停止對文檔的任何點擊即可。我的功能在document.body上註冊爲一個事件。

來源

2013-09-19 08:53:38 AndreaBogazzi

現在你還有10個:) – Adaptabi 2013-09-20 12:11:02

對於拖動，您正在捕獲mousedown和mousemove事件。（希望touchstart和touchmove事件爲好，支持觸摸界面。）

你需要調用event.preventDefault()同時在down和move事件，以保持瀏覽器選擇文本。

<input Value="test" onSelect="blur();">

來源

2013-10-03 16:16:59

感謝Robin，出於好奇，window.document和window或者document是否有區別？我很確定'document'是'window'的一個子.. – 2013-10-03 17:39:21

'window'是JavaScript在瀏覽器中運行的最外層範圍。因此，任何未在函數內聲明的變量都是'window'的屬性。直接引用'document'實際上是指'window.document'。 – 2013-10-09 23:37:44

據我所知，僅在「mousedown」事件中取消默認就足夠了。 – tremby 2017-02-04 02:36:52

簡單地阻止其通過調用模糊（）函數使用JavaScript，那麼對我來說最簡單的方法就是像這樣分配userSelect樣式：

var myElement = document.createElement('div'); 
myElement.style.userSelect = 'none';

來源

2015-08-27 09:27:42 Mehdi

如果需要阻止文本選擇對於特定元素：

例如（使用jQuery）：當被選擇爲以下

var mouseDown = false; 
$(element).on('mousedown touchstart', function(event) { 
    event.preventDefault(); 
    mouseDown = true; 
}); 
$(element).on('mousemove touchmove', function(event) { 
    event.preventDefault(); 
    if(mouseDown) { 
    // Do something here. 
    } 
}); 
$(window.document).on('mouseup touchend', function(event) { 
    // Capture this event anywhere in the document, since the mouse may leave our element while mouse is down and then the 'up' event will not fire within the element. 
    mouseDown = false; 
});

來源

2017-11-17 10:06:05

我怎樣才能防止用光標拖動文本/元素選擇

回答

相關問題