鼠标、键盘事件，鼠标样式

最新推荐文章于 2024-05-29 13:45:07 发布

唐月123456

最新推荐文章于 2024-05-29 13:45:07 发布

阅读量307

点赞数

分类专栏： css js代码文章标签： css html javascript jquery css3

本文链接：https://blog.csdn.net/weixin_39054337/article/details/113858521

版权

js代码同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

oncontextmenu禁用鼠标右击事件

document.oncontextmenu = function(){return false;}
document.oncontextmenu = function(event){event.returnValue = false;}
//直接在body上
<body oncontextmenu = "return false" ></body>

onselectstart禁用网页上选取的内容；

document.onselectstart = function(){
    event.returnValue = false;
}
//另一种<br><br>document.onselectstart = function(){ return false; }
<em id="__mceDel">//直接在body上 <body onselectstart = "return false" ></body></em>

oncopy事件禁用复制

document.oncopy = function(){
    event.returnValue = false;
}
//另一种
document.oncopy = function(){ return false; } <br>//直接在body上 <body oncopy = "return false" ></body>

禁用鼠标事件

document.onmousedown = function(e){
    if ( e.which == 2 ){// 鼠标滚轮的按下，滚动不触发
        return false;
    }
    if( e.which==3 ){// 鼠标右键
        return false;
    }
}

禁用键盘按键

　document.onkeydown = function(){
    if( event.ctrlKey ){
        return false;
    }
    if ( event.altKey ){
        return false;
    }
    if ( event.shiftKey ){
        return false;
    }
}

屏蔽F12 审查元素

document.onkeydown = function () {
if (window.event && window.event.keyCode == 123) {
alert("F12被禁用");
event.keyCode = 0;
event.returnValue = false;
}
if (window.event && window.event.keyCode == 13) {
window.event.keyCode = 505;
}
if (window.event && window.event.keyCode == 8) {
alert(str + "\n请使用Del键进行字符的删除操作！");
window.event.returnValue = false;
}
}

屏蔽右键菜单

document.oncontextmenu = function (event) {
if (window.event) {
event = window.event;
}
try {
var the = event.srcElement;
if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
return false;
}
return true;
} catch (e) {
return false;
}
}

屏蔽粘贴

document.onpaste = function (event) {
if (window.event) {
event = window.event;
}
try {
var the = event.srcElement;
if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
return false;
}
return true;
} catch (e) {
return false;
}
}

屏蔽复制

document.oncopy = function (event) {
if (window.event) {
event = window.event;
}
try {
var the = event.srcElement;
if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
return false;
}
return true;
} catch (e) {
return false;
}
}

屏蔽剪切

document.oncut = function (event) {
if (window.event) {
event = window.event;
}
try {
var the = event.srcElement;
if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
return false;
}
return true;
} catch (e) {
return false;
}
}

屏蔽选中

document.onselectstart = function (event) {
if (window.event) {
event = window.event;
}
try {
var the = event.srcElement;
if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
return false;
}
return true;
} catch (e) {
return false;
}
}

鼠标事件

/*
    鼠标事件：
        onclick：在鼠标左健点击弹起之后触发的事件，即一次完整的鼠标点击过程。过程完成瞬间触发函数；
        onmousedown：事件会在鼠标按键被按下时发生。
        onmouseup：事件会在松开鼠标按键时触发。
     */
    document.onclick = function () {
        console.log('click');
    };
    document.onmousedown = function () {
        console.log('mousedown');
    };
    document.onmouseup = function () {
        console.log('mousemove');
    }

/*
    onmouseover：属性在鼠标指针移动到元素上时触发。
    onmouseout： 属性在鼠标指针移动到元素外时触发。
    onmouseenter：属性在鼠标指针移动到元素上时触发,
    onmouseover和onmouseenter唯一的区别是 onmouseenter 事件不支持冒泡 。
    onmouseleave：属性在鼠标指针移动到元素外时触发,
    onmouseout和onmouseleave唯一的区别是 onmouseleave 事件不支持冒泡 。
 */
    var div = document.getElementsByTagName('div')[0];
    div.onmouseover = function () {
        div.style.backgroundColor = 'blue'
    };
    div.onmouseout = function () {
        div.style.backgroundColor = 'red'
    };
 
    var div2 = document.getElementsByTagName('div')[1];
    div2.onmouseenter = function () {
        div2.style.backgroundColor = 'yellow'
    };
    div2.onmouseleave = function () {
        div2.style.backgroundColor = 'black'
    }

/*
    用button来区分鼠标的按键：
        通过onmousedown和onmouseup来进行操作
     */
    document.onmousedown = function (event) {
        if (event.button === 0) {
            console.log('左键');
        } else if (event.button === 1) {
            console.log('中间滚轮');
        } else if (event.button === 2) {
            console.log('右键');
        }
    };
    document.onmouseup = function (event) {
        if (event.button === 0) {
            console.log('左键');
        } else if (event.button === 1) {
            console.log('中间滚轮');
        } else if (event.button === 2) {
            console.log('右键');
        }
    }

div拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<div></div>
</body>
<script type="text/javascript">
    /*
    一定要绝对定位，脱离文档流才可以移动。
     */
    var div = document.getElementsByTagName('div')[0];
    var disX,
        disY;
    div.onmousedown = function (e) {
        disX = e.pageX - parseInt(div.offsetLeft);
        disY = e.pageY - parseInt(div.offsetTop);
 
        document.onmousemove = function (e) {
            div.style.left = e.pageX - disX + "px";
            div.style.top = e.pageY - disY + "px";
        };
 
        document.onmouseup = function () {
            document.onmousemove = null;
        }
    };
    
</script>
</html>

鼠标样式

cursor:default 默认正常鼠标指针
cursor:hand 和 cursor:text 文本选择效果
cursor:move 移动选择效果
cursor:pointer 手指形状链接选择效果
cursor:url(url图片地址) 设置对象为图片

唐月123456

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标、键盘事件，鼠标样式

oncontextmenu禁用鼠标右击事件document.oncontextmenu = function(){return false;}document.oncontextmenu = function(event){event.returnValue = false;}//直接在body上<body oncontextmenu = "return false" ></body>onselectstart禁用网页上选取的内容；document.onselectst
复制链接

扫一扫

专栏目录