鼠标相关事件

1. 鼠标右键自定义菜单

• 原生js书写

思路： 鼠标右键点击事件，先阻止鼠标右键的默认事件；在把自己书写的html展示出来；再点击任意地方消失

//html
<li>胡歌</li>
//自定义的鼠标右键菜单  采取绝对定位，top、left默认为0，默认隐藏
<div class="menu">
    <div class="item">一级菜单</div>
    <div class="item">一级菜单</div>
    <div class="item">一级菜单</div>
</div>

//js部分  使用 contextmenu 事件
let lis=document.querySelector('li')
 //鼠标右键点击事件
lis.addEventListener('contextmenu',function(event){
	 // 阻止浏览器鼠标右击事件。
	 event.preventDefault();
	//显示自定义菜单，给它的left和top赋值
	 document.querySelector('.menu').style.display='block'
	 document.querySelector('.menu').style.left=event.clientX+'px'
	 document.querySelector('.menu').style.top=event.clientY+'px'
 })

//任意地方，隐藏右键菜单
document.body.addEventListener('click',function(){
	//做个判断，如果菜单隐藏就直接返回
    if(document.querySelector('.menu').style.display=='block'){
        document.querySelector('.menu').style.display='none'
    }else{
        return
    }
})

效果图：

注意：重点在于菜单的位置，应该是鼠标所在浏览器的位置为菜单的左上角顶点

鼠标事件对象的属性

• clientX：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）x轴的位置；
• clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置；
• screenX：当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置；
• screenY：当鼠标事件发生时，鼠标相对于显示器屏幕y轴的位置；
• offsetX：当鼠标事件发生时，鼠标相对于事件源x轴的位置
• offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置

---

2. wheel 事件

onwheel 事件在鼠标滚轮在元素上下滚动时触发

JavaScript 中, 使用 addEventListener() 方法:
object.addEventListener(“wheel”, myScript);

//在vue+element-ui项目中  使用方法：@wheel.native.prevent
//  .native 是因为需要穿透element的组件  .prevent 是因为阻止默认事件，不让滚动条往下滚，固定在该元素上
<el-scrollbar style="height:100%" @wheel.native.prevent="handscroll">
	xxxx
</el-scrollbar>

补充：

vue+element +el-scrollbar 鼠标放在元素内，滚动鼠标滚轮，使元素的内容横向滚动

<template>
  <el-scrollbar
    ref="scrollContainer"
    :vertical="false"
    class="scroll-container"
    @wheel.native.prevent="handleScroll"
  >
    <slot/>
  </el-scrollbar>
</template>

<script>
export default {
  name: "ScrollPane",
  data() {
    return {
      left: 0
    };
  },
  methods: {
    handleScroll(e) {
      // wheelDelta：获取滚轮滚动方向，向上120，向下-120，但为常量，与滚轮速率无关
      // wheelDelta只有部分浏览器支持，deltaY几乎所有浏览器都支持
      // deltaY：垂直滚动幅度，正值向下滚动。电脑鼠标滚轮垂直行数默认值是3
      const eventDelta = e.wheelDelta || -e.deltaY * 40;   //获取滚动的数据，有正有负
      
      //获取el-scrollbar组件中  el-scrollbar__wrap 这个元素
      const $scrollWrapper = this.$refs.scrollContainer.$refs.wrap;
      
      // xx.scrollLeft =数字, 将xx这个元素的滚动条水平偏移多少，scrollLeft从最左边0开始算
      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4;
    }
  }
};
</script>