जावास्क्रिप्ट में अपने युक्त div पर क्लिक करते समय पाठ को हाइलाइट करने से रोकने का सबसे अच्छा तरीका क्या है?

Question

मैं एचटीएमएल/सीएसएस/जेएस में एक मेनू बना रहा हूं और मुझे डबल-क्लिक होने पर मेनू में टेक्स्ट को हाइलाइट करने से रोकने के लिए एक तरीका चाहिए। मुझे आईडी में कई divs को एक फ़ंक्शन में पास करने का तरीका चाहिए और उनमें से हाइलाइट करना बंद कर दिया गया है।

तो जब उपयोगकर्ता गलती से (या उद्देश्य पर) मेनू पर डबल क्लिक करता है, तो मेनू इसके उप-तत्व दिखाता है लेकिन इसका टेक्स्ट हाइलाइट नहीं करता है।

वेब पर चारों ओर तैरते हुए कई स्क्रिप्ट हैं, लेकिन कई पुराने लगते हैं। सबसे अच्छा तरीका क्या है?

Answer 1

में (मोज़िला, फ़ायरफ़ॉक्स, कैमिनो, सफारी, गूगल क्रोम) आप इस का उपयोग कर सकते हैं:

div.noSelect { 
    -moz-user-select: none; /* mozilla browsers */ 
    -khtml-user-select: none; /* webkit browsers */ 
} 

IE के लिए कोई सीएसएस विकल्प है, लेकिन आप ondragstart घटना पर कब्जा कर सकते हैं और return false;

अद्यतन इस संपत्ति के लिए

ब्राउज़र समर्थन के बाद से 2008.

div.noSelect { 
    -webkit-user-select: none; /* Chrome all/Safari all */ 
    -moz-user-select: none;  /* Firefox all */ 
    -ms-user-select: none;  /* IE 10+ */ 
} 

https://css-tricks.com/almanac/properties/u/user-select/

Answer 2

आप कर सकते हैं:

• यह दे दो ("यह" किया जा रहा है अपने पाठ) एक onclick घटना
• प्रथम क्लिक वर्तमान समय में एक चर सेट
• दूसरा क्लिक जांच करता है कि कि चर रहा है देखने के लिए वर्तमान समय से एक्स समय (उदाहरण के लिए, 500 एमएमएस, डबल क्लिक के रूप में पंजीकृत नहीं है)
• यदि यह एक डबल क्लिक है, तो छुपा HTML जोड़ने जैसे पृष्ठ पर कुछ करें , document.focus() कर रहा है। आपको इनके साथ प्रयोग करना होगा क्योंकि कुछ अवांछित स्क्रॉलिंग का कारण बन सकते हैं।

Answer 3

आशा है कि आप यही देख रहे हैं।

<script type="text/javascript"> 
function clearSelection() { 
var sel ; 
if(document.selection && document.selection.empty){ 
document.selection.empty() ; 
} else if(window.getSelection) { 
sel=window.getSelection(); 
if(sel && sel.removeAllRanges) 
sel.removeAllRanges() ; 
} 
} 
</script> 

<div ondblclick="clearSelection()">Some text goes here.</div> 

Answer 4

आप इस सीएसएस इस्तेमाल कर सकते हैं बस चयन रंग (आईई द्वारा समर्थित नहीं) को छिपाने के लिए:

#id::-moz-selection { 
background: transparent; 
} 

#id::selection { 
background: transparent; 
}