防止在HTML中选择

Question

我在HTML页面上有一个div，每当我按下鼠标并移动它时，它就会显示“不能放下”光标，就像它选择了一些东西。有没有办法禁用选择？我尝试CSS用户选择没有没有成功。

Answer 1

的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和Opera，你将需要使用你希望是不可选择的元素的属性unselectable。您可以设置此在HTML中的属性：

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

可悲的是这个属性是不会继承的，这意味着你必须把属性在里面<div>每个元素的开始标记。如果这是一个问题，你也可以使用JavaScript来为元素的后代递归地做到这一点：

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

你有某种透明的形象，你的选择吗？通常在拖动图像时会出现“无法放下”图标。否则，通常在拖动时选择文本。如果是这样，你可能必须使用z-index将图像放在所有东西后面。

Answer 3

我使用cancelBubble=true和stopPropagation()在鼠标下移动处理程序。

Answer 4

这似乎CSS用户选择不妨碍图像拖放...所以...

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()好像在做诀窍（在IE7-9和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); 
    }); 
});