Tom*_*len 8 javascript cross-browser selectable
这是我用JS编写的图表:
css:
-moz-user-select:none;
-khtml-user-select: none;
Run Code Online (Sandbox Code Playgroud)
适用于Chrome/FF,但在IE中,所有元素仍然是可选择的,当拖动周围的条形时看起来很奇怪.
如何在IE中使这个无法选择?
Tim*_*own 14
在IE中,您需要unselectableHTML中的属性:
<div id="foo" unselectable="on">...</div>
Run Code Online (Sandbox Code Playgroud)
...或通过JavaScript设置:
document.getElementById("foo").setAttribute("unselectable", "on");
Run Code Online (Sandbox Code Playgroud)
要注意的是,不可选择的元素并不是由不可选择的元素的孩子继承的.这意味着您必须将属性放在其中每个元素的开始标记中,<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"));
Run Code Online (Sandbox Code Playgroud)
您可以使用Javascript在所有浏览器中使文本无法选择:
document.onselectstart=new Function('return false');
function noselect(e){return false;}
function click(){return true;}
document.onmousedown=noselect;
document.onclick=click;
Run Code Online (Sandbox Code Playgroud)
在这个SO线程中描述了另一种方式:有没有办法在HTML页面上使文本无法选择?
最便宜的方式可能是 <body onselectstart="return false">
最好的方法是使用以下CSS:
[unselectable=on] { -moz-user-select: none; -khtml-user-select: none; user-select: none; }
Run Code Online (Sandbox Code Playgroud)
并将IE unselectable属性添加到您想要取消选择的元素中(unselectable="on"在HTML中; element.setAttribute("unselectable","on")在javascript中)
| 归档时间: |
|
| 查看次数: |
13134 次 |
| 最近记录: |