मैं कर्सर ड्रैग

Question

के साथ टेक्स्ट/तत्व चयन को कैसे रोक सकता हूं मैंने एक पेजिंग नियंत्रण किया और मैंने देखा कि बटन पर क्लिक करते समय गलती से व्यक्तिगत छवियों और टेक्स्ट का चयन करना बहुत आसान है। क्या इसे रोकने के लिए संभव है?

चयन को स्पष्ट करने के लिए मेरा मतलब माउस के साथ हाइलाइट करना है। (स्क्रीन के एक तरफ से अपने माउस को खींचने का प्रयास करें।)

यदि आप इस ग्रिड में टेक्स्ट/नियंत्रण को हाइलाइट करने का प्रयास करते हैं तो इसे चुना नहीं जा सकता है। यह कैसे किया जाता है? Link

Answer 1

माउस डाउन इवेंट पर प्रारंभ करने और बाद में माउस चाल पर अपडेट करने के लिए दोनों ड्रैगिंग और चयन करना। आप, खींच शुरू करने के लिए, या माउस का पालन करने के घटना के उत्साह से भरा हुआ रद्द करने और ओवरराइड डिफ़ॉल्ट ब्राउज़र वापसी के ईवेंट प्रबंधित जब:

कुछ में इस तरह से अपनी mousedown खींच शुरू करते हैं और

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

handlers- के लिए कदम

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

Answer 2

इस प्रयास करें:

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

Answer 3

यह सबसे ब्राउज़रों में सीएसएस और IE में unselectable expando का प्रयोग कर प्राप्त किया जा सकता है। मेरा उत्तर यहां देखें: How to disable text selection highlighting using CSS?

Answer 4

मैं टिप्पणी करना चाहता था, लेकिन मेरे पास पर्याप्त प्रतिष्ठा नहीं है। @kennebec से सुझाए गए फ़ंक्शन का उपयोग करके मेरी जावास्क्रिप्ट ड्रैगिंग लाइब्रेरी में मेरी समस्या हल हो गई। यह दोषपूर्ण काम करता है।

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

मैं अपने mousedown और MouseMove कस्टम समारोह में यह कहा जाता है, के तुरंत बाद मैं पहचान सकता है मैं सही तत्व पर क्लिक किया। अगर मैं इसे सिर्फ फ़ंक्शन के शीर्ष पर कॉल करता हूं तो मैं दस्तावेज़ पर किसी भी क्लिक को मारता हूं। मेरा फ़ंक्शन document.body पर एक ईवेंट के रूप में पंजीकृत है।

Answer 5

खींचने के लिए, आप mousedown और mousemove ईवेंट कैप्चर कर रहे हैं। (और उम्मीद है कि touchstart और साथ ही touchmove घटनाओं, स्पर्श इंटरफेस का समर्थन करने के लिए।)

आपको पाठ का चयन से ब्राउज़र रखने के लिए दोनों down और move घटनाओं में event.preventDefault() कॉल करने के लिए की आवश्यकता होगी।

उदाहरण के लिए (jQuery का उपयोग):

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

Answer 6

बस जब निम्न के रूप में चुना कलंक() कॉल करके समारोह इसे रोक जावास्क्रिप्ट का उपयोग करके, मेरे लिए सबसे सरल तरीका उपयोगकर्ता को इस तरह की शैली को असाइन करना था:

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

Answer 7

आप एक निश्चित तत्व के लिए पाठ चयन को ब्लॉक करने की जरूरत है:

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; 
});