Javascript 防止在 HTML 中选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2326004/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent selection in HTML
提问by Tower
I have a div on a HTML page and whenever I press the mouse and move it, it will show that "can't drop" cursor like it selects something. Is there a way to disable selection? I tried CSS user-select with none without success.
我在 HTML 页面上有一个 div，每当我按下鼠标并移动它时，它都会显示“无法放下”光标，就像它选择了某些东西一样。有没有办法禁用选择？我尝试了 CSS 用户选择，但没有成功。
回答by Tim Down
The proprietary variations of user-selectwill work in most modern browsers:
的专有变体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;
}
For IE < 10 and Opera, you will need to use the unselectableattribute of the element you wish to be unselectable. You can set this using an attribute in HTML:
对于 IE < 10 和 Opera，您需要使用unselectable您希望不可选的元素的属性。您可以使用 HTML 中的属性进行设置：
<div id="foo" unselectable="on" class="unselectable">...</div>
Sadly this property isn't inherited, meaning you have to put an attribute in the start tag of every element inside the <div>. If this is a problem, you could instead use JavaScript to do this recursively for an element's descendants:
遗憾的是，此属性不是继承的，这意味着您必须在<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"));
回答by molokoloco
It's seem CSS user-select don't prevent image drag and drop... so..
似乎 CSS 用户选择不会阻止图像拖放......所以......
HTML :
HTML :
<img src="ico.png" width="20" height="20" alt="" unselectable="on" /> Blabla bla blabla
CSS :
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 :
JS：
$(function(){
$('*:[unselectable=on]').mousedown(function(event) {
event.preventDefault();
return false;
});
});
回答by kennebec
I use cancelBubble=trueand stopPropagation()in the mouse down and move handlers.
我在鼠标中使用cancelBubble=true和stopPropagation()并移动处理程序。
回答by leaf
event.preventDefault()seems to do the trick (tested in IE7-9 and Chrome) :
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);
});
});
回答by Michal Ciechan
Have you got some sort of transparent image that your selecting? Usually the "cant drop" icon appears when you drag an image. Otherwise it normally selects text when you drag. If so you might have to put the image behind everything using z-index.
你有一些你选择的透明图像吗？通常在拖动图像时会出现“cant drop”图标。否则，它通常会在您拖动时选择文本。如果是这样，您可能必须使用 z-index 将图像放在所有内容后面。
