常用的鼠标事件 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. 禁止选中文字 selectstart
    document.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 同样不会冒泡