[置頂] 解決Firefox/Opera 不支持 onselectstart事件

時間 2019-11-16

標籤置頂解決 firefox opera 不支持 onselectstart 事件欄目 Firefox 简体版

原文原文鏈接

在開發中，不少區域是不容許用戶select的，在IE/Safari/Chrome中咱們能夠使用onselectstart事件來阻止用戶選定元素內文本，javascript

但在火狐中，這段區域仍是能夠選擇的，css

以下：html

<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則沒有輸出。java

可是火狐有本身的css樣式"-moz-user-select「css3

咱們能夠使用它來禁止用戶選擇文本code

以下：htm

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

ok事件

user-select是css3 的樣式。ip