html 禁止选择与复制出现蓝色选中状态，禁止图片拖拽，隐藏鼠标,全屏状态下有效

chengchengbox

已于 2022-06-30 11:54:42 修改

阅读量1k

点赞数

分类专栏： css js html 文章标签： javascript

于 2022-04-27 09:29:48 首次发布

本文链接：https://blog.csdn.net/qq_34297991/article/details/124443137

版权

html 同时被 3 个专栏收录

35 篇文章 0 订阅

订阅专栏

24 篇文章 0 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

一、禁止选择与复制
js实现

['contextmenu', 'selectstart', 'copy'].forEach(function(ev){
    document.addEventListener(ev, function(ev){
        ev.preventDefault();
        ev.returnValue = false;
    })
});`

css实现

body {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

二、禁止图片拖拽
js实现（方法一）

['dragstart'].forEach(function(ev){
    document.addEventListener(ev, function(ev){
        ev.preventDefault();
        ev.returnValue = false;
    })
});

火狐有效（方法二）

window.οndragstart=function(event){  
        if(event.target.tagName.toUpperCase() =='IMG') {  
        // Chrome
        return false;
        }else if(event.explicitOriginalTarget && event.explicitOriginalTarget.tagName.toUpperCase() == 'IMG') {
        // 火狐
        return false;
        }else if($(event.target).has('>img').length) { 
        // IE
        return false;
        }
    }

三、隐藏鼠标
css实现

body {
    cursor:none;
}

四、取消右键（oncontextmenu）、禁止拖拽（ondragstart）、禁止选择（onselectstart）、禁止复制（onselect），在火狐浏览器中经测试有效，在body标签中加入这些

 <body oncontextmenu="return false" ondragstart="return false" onselectstart="return false" onselect="document.selection.empty()">

chengchengbox

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html 禁止选择与复制出现蓝色选中状态，禁止图片拖拽，隐藏鼠标,全屏状态下有效

一、禁止选择与复制js实现['contextmenu', 'selectstart', 'copy'].forEach(function(ev){ document.addEventListener(ev, function(ev){ ev.preventDefault(); ev.returnValue = false; })});`css实现body { -moz-user-select: none; -webkit-user-
复制链接

扫一扫