JS常用鼠标事件
程序员文章站
2024-03-04 08:53:35
...
1. 禁止选中文字和禁止右键菜单
1.1 禁止鼠标右键菜单
contextmenu事件：鼠标右键菜单事件。主要控制应该何时显示上下文菜单（右键菜单），主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
1.2 禁止鼠标选中（selectstart 事件：鼠标选中事件，用于界面文字防止选中）
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
代码：
<body>
测试
<script>
// 1. contextmenu 我们可以禁用右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})
// 2. 禁止选中文字 selectstart
document.addEventListener('selectstart', function(e) {
e.preventDefault();
})
</script>
</body>
2. 鼠标事件对象
event对象代表事件的状态，跟事件相关的一系列信息的集合。
现阶段我们主要是用鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent。
如下是MouseEvent鼠标事件对象的常用属性：
3. 获取鼠标在页面的坐标
一会我们要处理的案例，需要获取鼠标在界面上的坐标，所以现在我们来看一下如何获取，代码如下：
<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>
4. 案例：跟随鼠标的天使
案例效果： 下图中的图片，跟着鼠标一起移动
案例分析：
- 鼠标不断的移动，使用鼠标移动事件： mousemove
- 在页面中移动，给document注册事件
- 图片要移动距离，而且不占位置，我们使用绝对定位即可
- 核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
案例代码：
<img src="images/20191201104202949.jpg" 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 - 50 + 'px';
pic.style.top = y - 40 + 'px';
});
</script>