我在HTML页面上有一个div,每当我按下鼠标并移动它时,它就会显示“不能放下”光标,就像它选择了一些东西。有没有办法禁用选择?我尝试CSS用户选择没有没有成功。防止在HTML中选择
回答
的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"));
你有某种透明的形象,你的选择吗?通常在拖动图像时会出现“无法放下”图标。否则,通常在拖动时选择文本。如果是这样,你可能必须使用z-index将图像放在所有东西后面。
我使用cancelBubble=true
和stopPropagation()
在鼠标下移动处理程序。
什么阻止我是,你需要它在_both_鼠标下来和移动处理程序,而不仅仅是移动! – 2012-07-24 01:06:30
这似乎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;
});
});
我们可以使用此代码默认的所有图像? – 2015-05-07 10:10:32
您可以使用“img”选择器,但要小心“event.preventDefault();”因为没有其他与“mousedown”相关的事件将在你的页面上工作... – molokoloco 2015-05-09 10:11:57
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);
});
});
感谢您的这一点,在适当的方式上搜索了一段时间来阻止选择我的列表我阻止了点击,因为禁用的值不帖子.....哈哈 – thekevshow 2016-02-18 16:00:15
- 1. 防止HTML画布对象选择
- 2. 如何防止用户在HTML中选择多个复选框?
- 3. 如何防止在选择
- 4. 内容防止复制和内容选择预防脚本也阻止选择在HTML表单中工作
- 5. 防止双重DATAS在选择框中
- 6. 防止在DataGridView中选择单元格
- 7. 防止在Silverlight中选择TabControl
- 8. 在Silverlight中防止Treeview选择
- 9. 如何防止在列表中选择
- 10. jQuery - 防止在选择多个选项中取消选择
- 11. 防止UITextView中的“选择”和“全选”?
- 12. jQuery的防止多选择在多选
- 13. 选择元素 - 防止选择更改
- 14. 防止日期选择选择
- 15. HTML:防止隐藏选项
- 16. 如何防止TreeItem选择?
- 17. 防止多行选择
- 18. 防止选择+点击
- 19. 防止选择框更改
- 20. 防止选择走出div:
- 21. 如何防止在选择查询中选择重复行?
- 22. 如何防止在屏幕上显示多个html选择框?
- 23. 防止HTML选择/选项从jQuery后重置
- 24. 如何防止显示html选择(下拉框)选项
- 25. 如何防止选择JavaFX中
- 26. 防止重复值在选择字段
- 27. 防止文本选择“跳楼”在pdf.js
- 28. jquery防止多选择单选按钮
- 29. 防止在文本中插入html html
- 30. 选择充当下拉菜单,防止使用HTML更改文本/选择
嗯,好像火狐3.6只能与-moz-前缀。 – Tower 2010-02-24 12:49:04
它没有被选中,但仍然被复制到剪贴板(根据http://goo.gl/5P8uH的MDC规范) – ithkuil 2010-11-30 11:23:09
@ithkuil:有趣的。看起来像“-moz-none”是要走的路。我会修改我的答案。 – 2010-11-30 12:15:28