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