डबल क्लिक के बाद टेक्स्ट चयन को रोकें

Question

मैं अपने वेब ऐप में एक स्पर्धा पर dblclick ईवेंट को संभाल रहा हूं। एक साइड-इफेक्ट यह है कि पेज पर डबल क्लिक टेक्स्ट को चुनता है। मैं इस चयन को होने से कैसे रोक सकता हूं?

Answer 1

function clearSelection() {
    if(document.selection && document.selection.empty) {
        document.selection.empty();
    } else if(window.getSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
    }
}

आप इन शैलियों को सभी गैर-IE ब्राउज़रों और IE10 की अवधि के लिए भी लागू कर सकते हैं:

span.no_selection {
    user-select: none; /* standard syntax */
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

Comments

क्या वास्तव में चयन को हटाने के लिए वास्तव में चयन को रोकने का कोई तरीका है? इसके अलावा, अगर बेहतर पठनीयता के लिए आपका दूसरा विवरण अन्य के अंदर हो सकता है।

— डेविड

-Moz- (और -khtml- यदि आपके पास एक बड़ा कोनकेर दर्शक है) के अलावा -webkit- प्रीफिक्स (यह वेबकिट आधारित ब्राउज़रों के लिए पसंदीदा उपसर्ग है) का उपयोग करना सबसे अच्छा है।

— पलकविहीनता

यह अब IE10 में उपलब्ध है जैसा -ms-user-select: none;कि blogs.msdn.com/b/ie/archive/2012/01/11/… @PaoloBergantino

— नींबू

@ तीमारदार: जहाँ तक एक पुस्तकालय का उपयोग करके जावास्क्रिप्ट समाधानों का होना है, निश्चित है। नहीं सच में यकीन है कि क्यों एक नीचा वारंट

— पाओलो बर्गीनो

डबल क्लिक पर चयन को अक्षम करने और इसे पूरी तरह से अक्षम करने के बीच एक अंतर है। पहली प्रयोज्यता बढ़ जाती है। दूसरा घटता है।

— रोबो रोबोक

Answer 2

सादे जावास्क्रिप्ट में:

element.addEventListener('mousedown', function(e){ e.preventDefault(); }, false);

या jQuery के साथ:

jQuery(element).mousedown(function(e){ e.preventDefault(); });

Comments

हां, मैंने इसे उसी समस्या को हल करने के लिए उपयोग किया था जो मुझे (+1) थी, इसके अलावा return falseइस्तेमाल किए जाने के अलावा event.preventDefault()जो किसी भी अन्य हैंडलर को नहीं मार सकता है जो आपको मूसडाउन पर हो सकता है।

— साइमन ईस्ट

यह पेज पर textarea तत्वों को तोड़ता है :(

— ktejik

@johnktejik केवल अगर elementएक textarea है, हाँ।

— १४:१५ बजे १४:१५

इस इवेंट हैंडलर को "dblclick" को सौंपा जाना चाहिए - लेकिन यह काम नहीं करता है, जो इतना अजीब है। "मूसडाउन" के साथ, आप निश्चित रूप से खींचकर पाठ का चयन करने से भी रोकते हैं।

— corwin.amber

Answer 3

केवल एक डबल क्लिक के बाद पाठ चयन को रोकने के लिए:

आप MouseEvent#detailसंपत्ति का उपयोग कर सकते हैं। मूसडाउन या माउसअप घटनाओं के लिए, यह 1 प्लस वर्तमान क्लिक गणना है।

document.addEventListener('mousedown', function (event) {
  if (event.detail > 1) {
    event.preventDefault();
    // of course, you still do not know what you prevent here...
    // You could also check event.ctrlKey/event.shiftKey/event.altKey
    // to not prevent something useful.
  }
}, false);

Https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/ditail देखें

Comments

यह कमाल का है! फ़ायरफ़ॉक्स 53 में काम करता है।

— Zaroth

यह स्वीकृत उत्तर होना चाहिए। बाकी सब कुछ यहाँ ओपी के सवाल का जवाब देने के बजाय किसी भी माउस चयन (या बदतर) को रोकता है " डबल क्लिक के बाद पाठ चयन को रोकें "

— billynoah

क्रोम में भी काम करता है,

— 20:74 पर KS74

IE 11 विंडोज 10 =) पर भी काम करता है। इसे साझा करने के लिए धन्यवाद।

— फर्नांडो विएरा

(event.detail === 2)वास्तव में केवल डबल-क्लिक को रोकने के लिए उपयोग करें (और ट्रिपल-क्लिक आदि नहीं)

— रॉबिन स्टीवर्ट

Answer 4

एफडब्ल्यूआईडब्ल्यू, मैंने उन बाल तत्वों user-select: noneके मूल तत्व को सेट किया है जो मैं किसी भी तरह से चयनित नहीं करना चाहता हूं जब मूल तत्व पर कहीं भी डबल क्लिक करें। और यह काम करता है! शांत बात है contenteditable="true", पाठ चयन और आदि अभी भी बच्चे के तत्वों पर काम करता है!

बिल्कुल वैसा ही:

<div style="user-select: none">
  <p>haha</p>
  <p>haha</p>
  <p>haha</p>
  <p>haha</p>
</div>

Comments

धन्यवाद, style="user-select: note"हर जगह

— पेप्परिंग

उन मामलों के लिए अच्छा सीएसएस-केवल समाधान जहां आप मूल रूप से पाठ का चयन नहीं करना चाहते हैं। धन्यवाद!

— इयान लवजॉय

Answer 5

एक साधारण जावास्क्रिप्ट फ़ंक्शन जो पृष्ठ-तत्व के अंदर सामग्री को अचूक बनाता है:

function makeUnselectable(elem) {
  if (typeof(elem) == 'string')
    elem = document.getElementById(elem);
  if (elem) {
    elem.onselectstart = function() { return false; };
    elem.style.MozUserSelect = "none";
    elem.style.KhtmlUserSelect = "none";
    elem.unselectable = "on";
  }
}

Answer 6

कोणीय 2+ के लिए एक समाधान की तलाश करने वालों के लिए ।

आप mousedownतालिका सेल के आउटपुट का उपयोग कर सकते हैं ।

<td *ngFor="..."
    (mousedown)="onMouseDown($event)"
    (dblclick) ="onDblClick($event)">
  ...
</td>

और अगर रोका जाए detail > 1।

public onMouseDown(mouseEvent: MouseEvent) {
  // prevent text selection for dbl clicks.
  if (mouseEvent.detail > 1) mouseEvent.preventDefault();
}

public onDblClick(mouseEvent: MouseEvent) {
 // todo: do what you really want to do ...
}

dblclickअपेक्षा के अनुरूप उत्पादन कार्य जारी है।

Answer 7

या, मोज़िला पर:

document.body.onselectstart = function() { return false; } // Or any html object

IE पर,

document.body.onmousedown = function() { return false; } // valid for any html object as well

Comments

यह अतिश्योक्ति पाठ को चुनने की अनुमति नहीं देती है।

— jmav

@jmav आपको अधिक विशिष्ट तत्व की तुलना में फ़ंक्शन को ओवरराइड करना होगा document.body।

— साइपर

Answer 8

पुराना धागा, लेकिन मैं एक समाधान के साथ आया था जो मुझे विश्वास है कि क्लीनर है क्योंकि यह हर वस्तु के लिए बाध्य नहीं है, और केवल पृष्ठ पर यादृच्छिक और अवांछित पाठ चयनों को रोकता है। यह सीधा है, और मेरे लिए अच्छा काम करता है। यहाँ एक उदाहरण है; जब मैं कक्षा "तीर-दाएं" के साथ ऑब्जेक्ट पर कई बार क्लिक करता हूं, तो मैं पाठ-चयन को रोकना चाहता हूं:

$(".arrow-right").hover(function(){$('body').css({userSelect: "none"});}, function(){$('body').css({userSelect: "auto"});});

HTH!

Answer 9

यदि आप किसी भी विधि के साथ-साथ केवल एक डबल क्लिक पर पाठ का चयन करने से पूरी तरह से रोकने की कोशिश कर रहे हैं, तो आप user-select: noneसीएसएस विशेषता का उपयोग कर सकते हैं । मैंने Chrome 68 में परीक्षण किया है, लेकिन https://caniuse.com/#search=user-select के अनुसार इसे अन्य सामान्य सामान्य उपयोगकर्ता ब्राउज़र में काम करना चाहिए।

व्यवहारिक रूप से, क्रोम 68 में यह बाल तत्वों द्वारा विरासत में मिला है, और तत्व के आसपास के पाठ का चयन करने पर भी किसी तत्व के निहित पाठ का चयन करने की अनुमति नहीं दी।

Answer 10

IE 8 CTRL और SHIFT को रोकने के लिए व्यक्तिगत तत्व पर पाठ चयन पर क्लिक करें

var obj = document.createElement("DIV");
obj.onselectstart = function(){
  return false;
}

दस्तावेज़ पर पाठ चयन को रोकने के लिए

window.onload = function(){
  document.onselectstart = function(){
    return false;
  }
}

Answer 11

मुझे भी यही समस्या थी। मैंने इसे स्विच करके <a>और जोड़कर हल किया onclick="return false;"(ताकि इस पर क्लिक करने से ब्राउज़र इतिहास में कोई नई प्रविष्टि नहीं होगी)।