一、鼠标事件
1. 简单鼠标事件
* 鼠标的按下/松开事件: mousedown/mouseup * 鼠标的移入/移出事件: mouseover/mouseout * 鼠标的移动事件: mousemove 2. 复杂鼠标事件
* 鼠标的左击事件: click * 鼠标的右击事件: contextmenu * 鼠标的双击事件: dblclick
复杂鼠标事件和简单鼠标事件执行的顺序:
1
2
1
左击事件
右击事件
mousedown
mouseup
click
mouseup
contextmenu
鼠标事件
简单鼠标事件解释
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的属性 |
第二种方案 | 给 |
第三种方案 | 在事件函数体内添加 |
- 三种方案之间的缺陷
方案 | 缺陷 |
第一种 | 文本将不能够再被选中 |
第二种 | 双击该文本不会被选中，当从文本之前或之后开始选择文本则会被选中 |
第三种 | 文本被选中了，但是很快就会被取消选中，这种方法对用户的体验不好，不推荐使用 |
方案一示例代码
<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>
