blocks|key|1320830|text|user-select的专有变体将在大多数现代浏览器中工作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1320831|*.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;
}|code-block|syntax|javascript|1320832|对于IE+<+10和Opera，您需要使用您希望不可选择的元素的unselectable属性。您可以使用HTML中的属性对其进行设置：|1320833|<div+id="foo"+unselectable="on"+class="unselectable">...</div>|1320834|遗憾的是，这个属性不是继承的，这意味着您必须在<div>内的每个元素的开始标记中放置一个属性。如果这是一个问题，您可以改用JavaScript来递归地为元素的后代执行此操作：|1320835|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"));|1320836|entityMap^0|0|B|0|0|W|C|0|0|N|5|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|T|$]]

The proprietary variations of <code>user-select</code> will work in most modern browsers:

<pre><code>*.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;
}
</code></pre>

For IE &lt; 10 and Opera, you will need to use the <code>unselectable</code> attribute of the element you wish to be unselectable. You can set this using an attribute in HTML:

<pre><code>&lt;div id="foo" unselectable="on" class="unselectable"&gt;...&lt;/div&gt;
</code></pre>

Sadly this property isn't inherited, meaning you have to put an attribute in the start tag of every element inside the <code>&lt;div&gt;</code>. If this is a problem, you could instead use JavaScript to do this recursively for an element's descendants:

<pre><code>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"));
</code></pre>

blocks|key|1105869|text|你有没有一些你选择的透明图像？拖动图像时，通常会出现“铁路超高放置”图标。否则，它通常会在您拖动时选择文本。如果是这样的话，您可能必须使用z-index将图像放在所有内容的后面。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1105870|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|1320918|text|我在鼠标按下和移动处理程序中使用cancelBubble=true和stopPropagation()。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1320919|entityMap^0|G|H|Y|H|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

I use <code>cancelBubble=true</code> and <code>stopPropagation()</code> in the mouse down and move handlers.

blocks|key|1320954|text|似乎CSS用户选择并不能阻止图片的拖放...所以..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1320955|HTML：|1320956|<img+src="ico.png"+width="20"+height="20"+alt=""+unselectable="on"+/>+Blabla+bla+blabla|code-block|syntax|javascript|1320957|CSS：|1320958|*+{
+++++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;+}|1320959|JS：|1320960|$(function(){
++++$('*:[unselectable=on]').mousedown(function(event)+{
++++++++event.preventDefault();
++++++++return+false;
++++});
});|1320961|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

It's seem CSS user-select don't prevent image drag and drop... so..

HTML :

<pre><code>&lt;img src="ico.png" width="20" height="20" alt="" unselectable="on" /&gt; Blabla bla blabla
</code></pre>

CSS :

<pre><code>* {
 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; }
</code></pre>

JS :

<pre><code>$(function(){
 $('*:[unselectable=on]').mousedown(function(event) {
 event.preventDefault();
 return false;
 });
});
</code></pre>

blocks|key|1321020|text|event.preventDefault()似乎做到了这一点(在IE7-9和Chrome上进行了测试)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1321021|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);
++++});
});|code-block|syntax|javascript|1321022|entityMap^0|0|M|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<code>event.preventDefault()</code> seems to do the trick (tested in IE7-9 and Chrome) :

<pre><code>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);
 });
});
</code></pre>

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.

Prevent selection in HTML

jQuery

HTML5

我在HTML页面上有一个div，当我按下鼠标并移动它时，它会显示"can't drop“光标，就像它选择了什么东西一样。有没有办法禁用选择？我尝试了CSS user-select with none，但没有成功。

问阻止在HTML中进行选择
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问阻止在HTML中进行选择EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问阻止在HTML中进行选择
EN