鼠标是我们日常生活中经常使用的,这里我们来简单了解下JS中的鼠标事件以及使用的一些小技巧。
1. 鼠标事件类型
我们将鼠标事件分为两类:简单事件和复杂事件
1.1 简单事件
mousedown/mouseup
: 鼠标按钮在一个元素上点击/释放时触发。mouseover/mouseout
: 鼠标指针进入/离开一个元素时触发(鼠标快速移动的话可能会跳过中间元素)。mouseenter/mouseleave
: 鼠标指针进入/离开一个元素时触发(和mouseover/mouseout
的不同点在于:①元素内部进入或离开子代时的转换不会触发。②mouseenter/mouseleave
事件不冒泡)。mousemove
:鼠标在一个元素上移动时触发。
1.2 复杂事件
click
(鼠标点击事件,“点击”指的是用鼠标左键):鼠标左键在同一个元素上按下并释放开后触发。contextmenu
(右键菜单事件):鼠标右键单击后时触发。dbclick
(双击事件):在一个元素上快速点击2次(1秒内)时触发。
2. 鼠标事件的触发顺序
简单事件的触发顺序没什么好说的,我们来看看复杂事件的触发顺序:
- 从①中可以看到鼠标点击时的触发事件过程:
mousedown -> mouseup -> click
, which属性值为1(这个后面讨论)。 - 从②中可以看到右键菜单事件的触发过程:
mousedown -> mouseup -> contextmenu
,which属性值为3。 - 从③中可以看到双击事件的触发过程:
mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dbclick
, which属性值为1。 - ④是使用鼠标滚轮点击时(是的,鼠标滚轮也是也可以点击的!)的触发过程:
mousedown -> mouseup
,which属性值为2。
这上面,which我们猜猜也能知道代表着啥,即值1、2、3分别代表鼠标左键、中键(滚轮)、右键。
3. 小Tips
3.1 平时使用小技巧
- 平时我们想在新的标签页中打开一个链接,可能使用的方式是:鼠标右键唤起菜单栏 -> 选择“在新的标签页中打开链接”。实际上有更简便的方式:鼠标中键(滚轮)点击链接就可以在新的标签页中打开该链接了(我经常用“在新的标签页中打开”这个功能,然鹅之前居然不知道还可以用鼠标滚轮点击就可以的,孤陋寡闻了。。。)
- 当页面有垂直滚动条时,在页面空白处按下鼠标中键,然后移动鼠标,向上移动时可以让页面自动向上滚动,反之可以上页面自动向下滚动。向上/下移动的距离越大,自动滚动的速度越快。
- 从第2节中我们知道,触发一个点击事件,一共是需要经历:在同一个元素上,鼠标按下—>鼠标松开这一完整过程才能正常触发点击事件。也就是只要这过程不完整的话就不会触发点击事件,利用这点,我们平时在按下提交表单按钮的时候,突然又后悔了(比如要剁手一件宝贝),这时我们保持鼠标按键按下的状态,然后将鼠标移开“提交”这个按钮,再松开鼠标,这样我们就破坏了点击的流程(没在同一个元素上触发:mousedown(元素内)、mouseup(元素外)事件),点击事件也就不会触发了。
3.2 开发时的小技巧
- 所有鼠标事件都包含关于按下修饰符键(比如
Ctrl键 + 鼠标左键
同时点击等)的信息,如下为一些修饰符键:
事件属性(event对象上) | 对应的修饰符键 |
---|---|
shiftKey | Shift 键 |
altKey | Alt键 (或者 Mac 上的 Opt 键) |
ctrlKey | Ctrl 键 |
metaKey | Mac 的 Cmd 键 |
在Mac上通常是用Cmd替换Ctrl,对于不同的操作系统,我们可以在JS代码中通过if (event.ctrlKey || event.metaKey)
判断来让所有用户都有一致性的体验。
2. 很多用户都有在新的标签页中打开链接的习惯,我们可以将<a>
标签的样式设置成<button>
的样子,这样用户就可以在对应的地方使用在新的标签页中打开链接的功能,原生的<button>
标签是没有该功能的。
例子:
<ul id="menu" class="menu">
<li><a href="/html">HTML</a></li>
<li><a href="/javascript">JavaScript</a></li>
<li><a href="/css">CSS</a></li>
</ul>
对应的样式:
.menu li {
display: inline-block;
margin: 0;
}
.menu > li a {
display: inline-block;
margin: 0 2px;
outline: none;
text-align: center;
text-decoration: none;
font: 14px/100% sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
border-radius: .5em;
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
}
.menu > li:hover a {
text-decoration: none;
background: #007ead;
}
效果:
参考:
- https://javascript.info/default-browser-action
- https://javascript.info/mouse-events-basics#complex-events
转载:https://blog.csdn.net/cc18868876837/article/details/101867925
查看评论