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

Question

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

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

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

Comments

stackoverflow.com/questions/2700000/… के

— कापा

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

— Javi आर

Answer 1

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

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

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

Comments

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

— सिजिती

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

— द्रेनाई

Answer 2

खींचने के लिए, आप 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;
});

Comments

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

— मफिन मैन

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

— रॉबिन डॉटरटी

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

— कांप

Answer 3

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

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

Comments

यह वही था जो मुझे चाहिए था

— ल्यूक-ऑलस्टोर्न

Answer 4

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

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

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

Comments

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

— आदापाबी

Answer 5

इसे इस्तेमाल करे:

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

Comments

$ ( 'yourDivSelector') getSelection () removeAllRanges (): इस प्रयास

— एलेक्स Pacurar

selectstartघटना फ़ायरफ़ॉक्स में मौजूद नहीं है।

— टिम डाउन

Answer 6

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

Comments

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

— rtpax

Answer 7

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

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

Answer 8

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

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