我在 HTML 页面上有一个 div，每当我按下鼠标并移动它时，它都会显示“无法放下”光标，就像它选择了某些东西一样。有没有办法禁用选择？我尝试了 CSS 用户选择，但没有成功。
防止在 HTML 中选择
IT技术
javascript
html
selection
2021-01-21 22:43:37
5个回答
的专有变体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"));
似乎 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;
});
});
我在鼠标中使用cancelBubble=true和stopPropagation()并移动处理程序。
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);
});
});
你有一些你选择的透明图像吗？通常在拖动图像时会出现“cant drop”图标。否则，它通常会在您拖动时选择文本。如果是这样，您可能必须使用 z-index 将图像放在所有内容后面。