Ngăn chặn lựa chọn trong HTML

Question

Tôi có một div trên trang HTML và bất cứ khi nào tôi nhấn chuột và di chuyển nó, nó sẽ cho thấy con trỏ "không thể thả" giống như nó chọn thứ gì đó. Có cách nào để vô hiệu hóa lựa chọn không? Tôi đã thử CSS người dùng chọn không có thành công.

Answer 1

Các biến thể độc quyền của user-select sẽ làm việc 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 phải sử dụng unselectable thuộc tính của phần tử mà bạn muốn được unselectable. Bạn có thể thiết lập này sử dụng một thuộc tính trong HTML:

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

Đáng buồn là khách sạn này không được thừa kế, có nghĩa là bạn cầ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à vấn đề, thay vào đó bạn có thể sử dụng JavaScript để làm điều này một cách đệ quy cho con cháu 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")); 

Answer 2

Bạn có một số hình ảnh minh bạch mà bạn chọn? Thông thường, biểu tượng "không thể thả" xuất hiện khi bạn kéo một 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 tất cả mọi thứ bằng cách sử dụng z-index.

Answer 3

Tôi sử dụng cancelBubble=true và stopPropagation() trong trình đơn thả xuống và di chuyển.

Answer 4

Đó là dường như CSS người dùng chọn không ngăn chặn hình ảnh kéo và thả ... 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; 
    }); 
}); 

Answer 5

event.preventDefault() dường như làm mẹo (đượ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); 
    }); 
});