解决Firefox/Opera 不支持onselectstart事件实现不容许用户select

时间 2019-11-13

标签解决 firefox opera 不支持 onselectstart 事件实现不容许用户 select 栏目 Firefox 繁體版

原文原文链接

在IE/Safari/Chrome中咱们能够使用onselectstart事件来阻止用户选定元素内文本，本文为你们解决下火狐中如何实现不能选择，由此需求的朋友能够参考下，但愿对你们有所帮助

在开发中，不少区域是不容许用户select的，在IE/Safari/Chrome中咱们能够使用onselectstart事件来阻止用户选定元素内文本，但在火狐中，这段区域仍是能够选择的，
以下：

<html>
<head>
<meta charset="gbk">
<title>Firefox/Opera不支持onselectstart事件</title>
</head>
<body>
<div id="noselect">Text</div>
<script type="text/javascript">
var div = document.getElementById('noselect');
div.onselectstart = function () {
console.log(3);
}
</script>
</body>
</html>

当用鼠标去选定div内的文本时，IE/Safari/Chrome 的控制台输出了3，Firefox/Opera则没有输出。
可是火狐有本身的css样式"-moz-user-select“
咱们能够使用它来禁止用户选择文本
以下：javascript

<html>
<head>
<meta charset="gbk">
<title>Firefox/Opera不支持onselectstart事件</title>
<style type="text/css">
#noselect
{
-moz-user-select: none;
cursor: default;
}
</style>
</head>
<body>
<div id="noselect" onselectstart="return false;">Text</div>
</body>
</html>

user-select是css3 的样式。css