onselectstart与onselect—禁止选择或禁止复制

时间 2019-12-09

标签 onselectstart onselect 禁止选择复制繁體版

原文原文链接

这两个事件看起来很类似，事实上却很是的不一样。javascript

onselectstartcss

使用js禁止用户选中网页上的内容，IE及Chrome下的方法同样。
使用onselectstart，例如
IE: <body onselectstart="return false">
Firefox：，控制css: body { -moz-user-select: none; } html

onselectstart几乎能够用于全部对象，其触发时间为目标对象被开始选中时（即选中动做刚开始，还没有实质性被选中）。该事件常使用java

于使目标对象“禁止变蓝”，好比在不少地方当用户双击时，一些元素会变成蓝色（选中状态），而当咱们要避免这种状况时就可使用该事web

件，使用示例以下：浏览器

<div id="tmp" onselectstart="return false">flondon</div>

或者htm

<div id="tmp">flondon</div>
<script type="text/javascript">
document.getElementById("tmp").onselectstart = function(){return false;};
</script>

或者对象

<div id="tmp">flondon</div>
<script type="text/javascript">
if(document.addEventListener)
{
document.getElementById("tmp").addEventListener("selectstart", function(){return false;}, false);
}
else
{
document.getElementById("tmp").attachEvent("onselectstart", function(){return false;});
}
</script>

注：
一、onselectstart事件不被input和textarea标签支持，而onselect事件只被input和textarea支持。
二、Firefox/Opera不支持onselectstart事件Firefox中可使用CSS "-moz-user-select:none"属性来禁止文本选定
三、webkit浏览器可使用“-khtml-user-select”，固然也可使用onselectstart事件来阻止用户选定元素内文本，以下blog

<div onselectstart="return false">accc</div>

onselect事件

onselect是在文本框（input、textarea）内的文本被选中时所触发的事件，其触发时间是在文本被选择之后（即文本已经被选择，已经

显式的表现出来）。该事件只被input和textarea标签支持。