मैं कर्सर को खींचने के साथ पाठ / तत्व चयन को कैसे रोक सकता हूं


83

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

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

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



एक और संभव डुप्लिकेट stackoverflow.com/questions/2326004/prevent-selection-in-html
Javi आर

जवाबों:


108

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

कुछ इस तरह से आपकी शुरुआत मूसडाउन को खींचती है और हैंडलर चलती है-

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

11
हाँ e.preventDefault () आधुनिक ब्राउज़रों में आपके लिए आवश्यक होना चाहिए। बाकी कोड बेमानी है: window.event IE के पुराने संस्करणों के लिए है, लेकिन चूंकि उन ईवेंट्स में preventDefault विधि नहीं है और झूठी झूठी pauseEvent फ़ंक्शन कॉल में वापस नहीं आती है ... यह कुछ भी नहीं करता है (2011 में भी नहीं)।
सिजिती

18
CSS: user-select: none;मैं क्या उपयोग करता हूँ। जेएस के लिए कोई ज़रूरत नहीं है इसे हल करने के लिए मुझे सोचना चाहिए
द्रेनाई

53

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

ब्राउज़र को टेक्स्ट सेलेक्ट करने के लिए आपको इवेंट और इवेंट event.preventDefault()दोनों में कॉल करना होगा ।downmove

उदाहरण के लिए (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;
});

धन्यवाद रॉबिन, जिज्ञासा से बाहर वहाँ के बीच एक अंतर है window.documentऔर windowया बस document? मुझे पूरा यकीन documentहै कि यह एक बच्चा है window..
मफिन मैन

1
windowसबसे बाहरी गुंजाइश है जिसमें ब्राउज़र में जावास्क्रिप्ट चलता है। तो किसी फ़ंक्शन के अंदर घोषित किया गया कोई भी वैरिएबल की संपत्ति नहीं है window। संदर्भित documentसीधे वास्तव में करने के लिए बात कर रहा है window.document
रॉबिन डॉटरटी

4
जहां तक ​​मैं बता सकता हूं कि यह केवल "मूसडाउन" इवेंट पर डिफ़ॉल्ट को रद्द करने के लिए पर्याप्त है।
कांप

24

यह बहुत पुरानी पोस्ट है। यह उस स्थिति का सटीक उत्तर नहीं दे सकता है, लेकिन मैं अपने समाधान के लिए CSS का उपयोग करता हूं:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

यह वही था जो मुझे चाहिए था
ल्यूक-ऑलस्टोर्न

19

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

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

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


2
अब आपके पास 10 और हैं :)
आदापाबी


8

यह सबसे ब्राउज़रों में सीएसएस और unselectableIE में विस्तारक का उपयोग करके प्राप्त किया जा सकता है । मेरा जवाब यहां देखें: CSS का उपयोग करके हाइलाइट किए गए टेक्स्ट चयन को कैसे अक्षम करें?


इस घटना को पूरी तरह से स्वीकार करने की तुलना में यह एक बेहतर उत्तर है, इस घटना को पूरी तरह से दरकिनार कर
rtpax

0

निम्नलिखित के रूप में चयनित होने पर केवल कलंक () फ़ंक्शन को कॉल करके इसे रोकें:

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

0

यदि आपको जावास्क्रिप्ट का उपयोग करके एक निश्चित तत्व के लिए पाठ चयन को ब्लॉक करने की आवश्यकता है, तो मेरे लिए सबसे सरल विधि उपयोगकर्ता को असाइन करना था जैसे शैली:

var myElement = document.createElement('div');
myElement.style.userSelect = 'none';
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.