常用的鼠标事件 JavaScript

常用的鼠标事件

常用的鼠标事件

1. 禁止鼠标右键菜单

   document.addEventListener('contextmenu', function(e) {e.preventDefault();
   })
   

2. 禁止鼠标选中（selectstart 开始选中）

   document.addEventListener('selectstart', function(e) {e.preventDefault();
   })
   

我是一段不愿意分享的文字
<script>// 1. contextmenu 我们可以禁用右键菜单document.addEventListener('contextmenu', function(e) {e.preventDefault();})// 2. 禁止选中文字 selectstartdocument.addEventListener('selectstart', function(e) {e.preventDefault();})
script>

​

鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象

MouseEvent 和键盘事件对象 KeyboardEvent

// 鼠标事件对象 MouseEvent
document.addEventListener('click', function(e) {// 1. click 鼠标在可视区的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);
})

mouseenter 和 mouseover 的区别

mouseenter 鼠标事件

• 当鼠标移动到元素上时就会触发 mouseenter事件
• 类似 mouseover，它们两者之间的差别是
• mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发
• 之所以这样，就是因为 mouseenter 不会冒泡
• 跟 mouseenter 搭配鼠标离开 mouseleave 同样不会冒泡

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！