禁止选择网页内容

1. 通过css样式来控制

<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>demo</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <style>
        .unselectable {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>
</head>

<body>
    <div class="unselectable">
        禁止选中这段内容。
    </div>
</body>

</html>

2. 通过JS来控制

<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>demo</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>

<body>
    <div class="unselectable">
        禁止选中这段内容。
    </div>
</body>

</html>
<script type="text/javascript">
    $(".unselectable").on('selectstart', function(event) {
        return false;
    })
</script>

IE 10 、Chrome 66 、Firefox 58 均有效果。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容