常用鼠标事件

yyyyyyoow

于 2024-06-28 16:48:48 发布

阅读量405

点赞数 5

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/mobolove/article/details/140047865

版权

常用鼠标事件
1.禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
2.禁止鼠标选中
selectstarrt开始选中
<body>
我是一段不愿意分享的文字
<script>
// 1. contextmenu 我们可以禁用右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
// 2. 禁止选中文字 selectstart
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
</script>
</body>

鼠标事件对象MouseEvent
鼠标事件对象
e.clientX   返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY   返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX       返回鼠标相对于文档页面的X坐标IE9+支持
e.pageY       返回鼠标相对于文档页面的Y坐标IE9+支持
e.screenX   返回鼠标相对于电脑屏幕的X坐标
e.screenY   返回鼠标相对于电脑屏幕的Y坐标
<script>
// 鼠标事件对象 MouseEvent
document.addEventListener('click', function(e) {
// 1. client 鼠标在可视区的x和y坐标
console.log(e.clientX);
console.log(e.clientY);
console.log('---------------------');

// 2. page 鼠标在页面文档的x和y坐标
console.log(e.pageX);
console.log(e.pageY);
console.log('---------------------');

// 3. screen 鼠标在电脑屏幕的x和y坐标
//页面不全屏显示也是对全电脑屏幕上边距左边距
console.log(e.screenX);
console.log(e.screenY);

})
</script>

例跟随鼠标移动的天使
分析：1.鼠标不断移动，使用鼠标移动事件：mousemove
2.在页面中移动，给document注册事件
3.图片要移动距离，而且不占位置，使用绝对定位
<style>
img {
position: absolute;
top: 2px;
}
</style>

<body>
<img src="images/angel.gif" alt="">
<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove', function(e) {
// 1. mousemove只要我们鼠标移动1px 就会触发这个事
// 2.核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的top和left 值就可以移动图片
var x = e.pageX;
var y = e.pageY;
console.log('x坐标是' + x, 'y坐标是' + y);
//3 . 千万不要忘记给left 和top 添加px 单位
pic.style.left = x + 'px';
pic.style.top = y + 'px';
});
</script>
</body>

常用键盘事件
onkeyup       某个键盘按键被松开时触发
onkeydown   某个键盘按键按下时触发
onkeypress   某个键盘按键被按下时触发但是不识别功能键如ctrl、箭头等
document.addEventListener('keyup', function() {
console.log('我弹起了');
})
document.onkeyup = function() {
console.log('我弹起了');
}
三个事件的执行顺序 keydown -- keypress -- keyup
注意：onkeyDown和onkeyup不区分字母大小写，onkeypress区分字母大小写