Ngăn lựa chọn trong HTML

Tôi có một div trên một trang HTML và bất cứ khi nào tôi nhấn chuột và di chuyển nó, nó sẽ hiển thị rằng con trỏ "không thể thả" giống như nó đang chọn một thứ gì đó. Có cách nào để tắt lựa chọn không? Tôi đã thử CSS user-select mà không thành công.

Các biến thể độc quyền của user-selectsẽ hoạt động trong hầu hết các trình duyệt hiện đại:

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

Đối với IE <10 và Opera, bạn sẽ cần sử dụng unselectablethuộc tính của phần tử mà bạn muốn không được chọn. Bạn có thể đặt điều này bằng cách sử dụng một thuộc tính trong HTML:

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

Đáng buồn là thuộc tính này không được kế thừa, có nghĩa là bạn phải đặt một thuộc tính trong thẻ bắt đầu của mọi phần tử bên trong <div>. Nếu đây là sự cố, thay vào đó bạn có thể sử dụng JavaScript để thực hiện điều này một cách đệ quy cho phần tử con của một phần tử:

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

Có vẻ như CSS người dùng chọn không ngăn cản việc kéo và thả hình ảnh ... vì vậy ..

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

Tôi sử dụng cancelBubble=truevà stopPropagation()trong chuột xuống và di chuyển các trình xử lý.

event.preventDefault() dường như thực hiện thủ thuật (được thử nghiệm trong IE7-9 và Chrome):

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

Bạn đã có một số loại hình ảnh trong suốt mà bạn chọn chưa? Thông thường, biểu tượng "không thể thả" xuất hiện khi bạn kéo hình ảnh. Nếu không, nó thường chọn văn bản khi bạn kéo. Nếu vậy, bạn có thể phải đặt hình ảnh đằng sau mọi thứ bằng cách sử dụng z-index.