js_鼠标事件讲解(一)

一、鼠标事件
1. 简单鼠标事件
* 鼠标的按下/松开事件: mousedown/mouseup
* 鼠标的移入/移出事件: mouseover/mouseout
* 鼠标的移动事件: mousemove
2. 复杂鼠标事件
* 鼠标的左击事件: click
* 鼠标的右击事件: contextmenu
* 鼠标的双击事件: dblclick

复杂鼠标事件和简单鼠标事件执行的顺序:

在这里插入图片描述
简单鼠标事件解释

mousedown 当鼠标按下左键时触发，可以不释放左键则一直触发事件
mosueup 当鼠标按下并松开时触发该事件
mouseover 当鼠标移入某个元素中时触发该事件
mouseout 当鼠标移出某个元素时触发该事件
mousemove 当鼠标在某个元素中移动时触发该事件

复杂鼠标事件解释

click 单击事件,当鼠标单击某个元素时触发该事件
dblclick 双击事件,当鼠标按下鼠标右键两次时触发该事件
contextmenu 当鼠标按下鼠标右键时触发该事件

鼠标事件的属性 which

用法
* event.which == 1 ==> 鼠标左键
* event.which == 2 ==> 鼠标右键
* event.which == 3 ==> 鼠标滚轮
示例

注意：由于 click 和 contextmenu 事件 which 的唯一性，所以不需要使用到 which 这个属性

二、dblclick事件引发的问题

当使用dblclick事件添加到文本上时，当我们双击这个文本时，不仅仅会触发dblclick事件，还会触发浏览器的默认行为，选中文本，而有时候我们不需要选中文本，所以以下有几种解决方案

方案	方法
第一种方案	使用CSS的属性`user-select:none`来禁用文本的选择
第二种方案	给`mousedown`事件添加一段代码`retrun false`[推荐]
第三种方案	在事件函数体内添加`getSelection().removeAllRanges()`

三种方案之间的缺陷

方案	缺陷
第一种	文本将不能够再被选中
第二种	双击该文本不会被选中，当从文本之前或之后开始选择文本则会被选中
第三种	文本被选中了，但是很快就会被取消选中，这种方法对用户的体验不好，不推荐使用

方案一示例代码
在这里插入图片描述

<style>
   div>span{
     cursor: pointer;
     user-select: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
   }
</style>
<body>
 <div>
   my <span>name</span> is <span>daniel-lwj</span>
 </div>
 <script>
   let div = document.body.firstElementChild;
   div.addEventListener('dblclick',function(event){
     let target = event.target;
     if(target.tagName != 'SPAN') return;
     alert('双击了文本');
   });
 </script>
</body>

由上可知，如果使用第一宗方案则文本将不能够选择

方案二示例代码
在这里插入图片描述

<body>
<div>
  my <span>name</span> is <span>daniel-lwj</span>
</div>
<script>
  let div = document.body.firstElementChild;
  div.addEventListener('dblclick', function (event) {
    let target = event.target;
    if (target.tagName != 'SPAN') return;
    alert('双击了文本');
  });
  let spans = document.querySelectorAll('div>span');
  for (let i = 0; i < spans.length; i++) {
    spans[i].onmousedown = function () {
      return false;
    }
  }
</script>
</body>

方案三示例代码
在这里插入图片描述

<body>
 <div>
   my <span>name</span> is <span>daniel-lwj</span>
 </div>
 <script>
   let div = document.body.firstElementChild;
   div.addEventListener('dblclick', function (event) {
     let target = event.target;
     if (target.tagName != 'SPAN') return;
     getSelection().removeAllRanges();
     alert('双击了文本');
   });
 </script>
</body>

来源：CSDN

作者：h5-css3-js

链接：https://blog.csdn.net/qq_40709911/article/details/103473203

标签

target

event