阻止在HTML中进行选择
阻止在HTML中进行选择
提问于 2010-02-24 20:41:48
我在HTML页面上有一个div，当我按下鼠标并移动它时，它会显示"can't drop“光标，就像它选择了什么东西一样。有没有办法禁用选择？我尝试了CSS user-select with none，但没有成功。
回答 5
Stack Overflow用户
回答已采纳
发布于 2010-02-24 20:45:29
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"));Stack Overflow用户
发布于 2011-03-26 01:11:30
似乎CSS用户选择并不能阻止图片的拖放...所以..。
HTML：
<img src="ico.png" width="20" height="20" alt="" unselectable="on" /> Blabla bla blablaCSS：
* {
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;
});
});Stack Overflow用户
发布于 2010-02-24 21:53:08
我在鼠标按下和移动处理程序中使用cancelBubble=true和stopPropagation()。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2326004
复制相关文章
相似问题
腾讯云开发者
