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

最新推荐文章于 2021-10-27 21:24:56 发布

iBenxiaohai123

最新推荐文章于 2021-10-27 21:24:56 发布

阅读量965

点赞数 1

分类专栏： JQuery JavaScript CSS样式

本文链接：https://blog.csdn.net/ibenxiaohai123/article/details/76255673

版权

JavaScript 同时被 3 个专栏收录

43 篇文章 0 订阅

订阅专栏

CSS样式

25 篇文章 0 订阅

订阅专栏

JQuery

17 篇文章 0 订阅

订阅专栏

这两个事件看起来很相似，事实上却非常的不同。

1.onselectstart

　　这个事件主要是用于禁止选择网页中的文字。代码为：

document.onselectstart =function(){
            return false;
        }

　　另外ff/opera不支持此事件，ff可以用css控制：css: body { -moz-user-select: none; }。webkit浏览器可以使用“-khtml-user-select”，当然也可以使用onselectstart事件来阻止用户选定元素内文本。

　　注意此事件不支持对input和textarea无效。

2.onselect

　　此事件在选择textarea或input内的内容后触发。因此只有input和textarea标签支持。例如:

<input type = 'text' id = 'input>
<script>
             var input = document.getElementById('input');
             input.onselect = function(){
                alert("被触发");
            }     
</script>

onselectstart

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

onselectstart几乎可以用于所有对象，其触发时间为目标对象被开始选中时（即选中动作刚开始，尚未实质性被选中）。该事件常使用

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

件，使用示例如下：

[html] view plain copy

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

或者

[javascript] view plain copy

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

或者

[html] view plain copy

<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>

注：
1、onselectstart事件不被input和textarea标签支持，而onselect事件只被input和textarea支持。
2、Firefox/Opera不支持onselectstart事件Firefox中可以使用CSS "-moz-user-select:none"属性来禁止文本选定
3、webkit浏览器可以使用“-khtml-user-select”，当然也可以使用onselectstart事件来阻止用户选定元素内文本，如下
<div onselectstart="return false">accc</div>

onselect

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

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