HTML'de seçimi önle

82

Bir HTML sayfasında bir div var ve fareye her basıp hareket ettirdiğimde, imlecin bir şeyi seçtiği gibi "bırakılamaz" olduğunu gösterecek. Seçimi devre dışı bırakmanın bir yolu var mı? Başarısız olmadan CSS kullanıcı seçimini denedim.

javascript html selection

— Kule
kaynak

166

Tescilli varyasyonları user-selectçoğu modern tarayıcıda çalışacaktır:

*.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 ve Opera için, unselectableseçilememesini istediğiniz öğenin niteliğini kullanmanız gerekecektir . Bunu HTML'de bir öznitelik kullanarak ayarlayabilirsiniz:

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

Maalesef bu özellik miras alınmıyor, yani içindeki her öğenin başlangıç etiketine bir öznitelik eklemeniz gerektiği anlamına geliyor <div>. Bu bir sorunsa, bunun yerine JavaScript'i bir öğenin soyundan gelenler için yinelemeli olarak yapmak için kullanabilirsiniz:

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"));

— Tim Down
kaynak

seçilmedi ancak yine de panoya kopyalanmış durumda ( goo.gl/5P8uH adresindeki MDC spesifikasyonuna göre )

— ithkuil

@ithkuil: İlginç. Görünüşe göre -moz-nonegidilecek yol bu. Cevabımı düzelteceğim.

— Tim Down

Firefox 5'te, -moz-noneFirebug tarafından otomatik olarak tamamlanmıyor gibi görünüyor , ancak none: -moz-user-select: none(çalışıyor)

— Lekensteyn

@Lekensteyn: Her ikisi de seçimi önlemek için çalışıyor, ancak kavramsal olarak bir fark var: developer.mozilla.org/en/CSS/-moz-user-select . Ancak, aşağıdakiler bunu Firefox 5'te desteklemiyor gibi görünüyor: jsfiddle.net/vhwJ5/2 .

— Tim Down

user-selectSadece metinle

— ilgilendiğinden

10

Görünüşe göre CSS kullanıcı seçimi, resmin sürüklenip bırakılmasını engellemiyor ... bu yüzden ..

HTML:

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

CSS:

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

JS:

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

— Molokoloco
kaynak

"İmg" seçiciyi kullanabilirsiniz, ancak "event.preventDefault ();" ile dikkatli olun. çünkü sayfanızda "fare indirme" ile ilişkili başka hiçbir etkinlik çalışmayacaktır ...

— molokoloco

5

Kullanıyorum cancelBubble=trueve stopPropagation()farede aşağı ve işleyicileri hareket ettiriyorum.

— Kennebec
kaynak

2

Beni engelleyen şey , ona sadece hareket etmede değil , hem fareyi aşağı hem de hareket ettiricilerde ihtiyacınız olmasıydı !

— Matthew Schinckel

4

event.preventDefault() hile yapıyor gibi görünüyor (IE7-9 ve Chrome'da test edildi):

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

— Yaprak
kaynak

Bunun için teşekkür ederim, bir listeyi seçmeyi engellemenin doğru yolunu aradım, devre dışı bırakılan değerler gönderilmediğinden tıklamayı engelliyordum ..... haha

— thekevshow

1

Seçtiğiniz bir çeşit şeffaf görüntünüz var mı? Bir görüntüyü sürüklediğinizde genellikle "bırakılamıyor" simgesi görünür. Aksi takdirde, sürüklediğinizde normalde metni seçer. Öyleyse, görüntüyü z-endeksini kullanarak her şeyin arkasına yerleştirmeniz gerekebilir.

— Michal Ciechan
kaynak