HTML में चयन रोकें

Question 1

मेरे पास HTML पृष्ठ पर एक div है और जब भी मैं माउस दबाता हूं और इसे स्थानांतरित करता हूं, तो यह दिखाएगा कि "ड्रॉप नहीं कर सकता" जैसे यह कुछ का चयन करता है। क्या चयन को अक्षम करने का कोई तरीका है? मैंने बिना किसी सफलता के साथ सीएसएस उपयोगकर्ता-चयन की कोशिश की।

Question 2

user-selectअधिकांश आधुनिक ब्राउज़रों में काम करने का स्वामित्व भिन्नताएँ होंगी:

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

IE <10 और ओपेरा के लिए, आपको unselectableउस तत्व की विशेषता का उपयोग करने की आवश्यकता होगी जिसे आप अचूक होने की इच्छा रखते हैं। आप इसे HTML में एक विशेषता का उपयोग करके सेट कर सकते हैं:

<div id="foo" unselectable="on" class="unselectable">...</div>

अफसोस की बात है कि यह संपत्ति विरासत में नहीं मिली है, जिसका अर्थ है कि आपको प्रत्येक तत्व के प्रारंभ टैग में एक विशेषता डालनी होगी <div>। यदि यह एक समस्या है, तो आप इसके बदले जावास्क्रिप्ट का उपयोग किसी तत्व के वंशजों के लिए कर सकते हैं:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

Question 3

ऐसा लगता है कि सीएसएस उपयोगकर्ता-चयन छवि को खींचने और छोड़ने से नहीं रोकता है ... इसलिए ..

HTML:

<img src="ico.png" width="20" height="20" alt="" unselectable="on" /> Blabla bla blabla

सीएसएस:

* {
     user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
}

::selection { background: transparent;color:inherit; }
::-moz-selection { background: transparent;color:inherit; }

जेएस:

$(function(){
    $('*:[unselectable=on]').mousedown(function(event) {
        event.preventDefault();
        return false;
    });
});

Question 4

मैं माउस का उपयोग करता हूं cancelBubble=trueऔर stopPropagation()हैंडलर नीचे ले जाता हूं ।

Question 5

event.preventDefault() चाल करने के लिए लगता है (IE7-9 और क्रोम में परीक्षण):

jQuery('#slider').on('mousedown', function (e) {
    var handler, doc = jQuery(document);
    e.preventDefault();
    doc.on('mousemove', handler = function (e) {
        e.preventDefault();
        // refresh your screen here
    });
    doc.one('mouseup', function (e) {
        doc.off('mousemove', handler);
    });
});

Question 6

क्या आपको किसी प्रकार की पारदर्शी छवि मिली है जो आपके चयन की है? जब आप किसी चित्र को खींचते हैं तो आमतौर पर "कैंट ड्रॉप" आइकन दिखाई देता है। अन्यथा यह आम तौर पर पाठ का चयन करता है जब आप खींचते हैं। यदि ऐसा है तो आपको z- इंडेक्स का उपयोग करके छवि को हर चीज के पीछे रखना पड़ सकता है।