防止在HTML中select

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

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，您将需要使用您希望不可选的元素的不可选属性。 您可以使用HTML中的属性来设置它：

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

可悲的是，这个属性没有被inheritance，这意味着你必须在<div>的每个元素的开始标签中放置一个属性。 如果这是一个问题，你可以使用JavaScript来recursion地为元素的后代做这件事：

 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

这似乎CSS用户select不阻止图像拖放…所以..

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 3

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

Answer 4

event.preventDefault()似乎做的（在IE7-9和Chrome中testing）：

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

Answer 5

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