29

鼠标事件基础回顾

 4 years ago
source link: https://hijiangtao.github.io/2020/01/16/Mouse-Event-Basics/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

回到图形化编辑器的开发上，当用户添加文字、图片或者任何其他素材时，选中、取消选中以及成组等复杂操作是必不可少的功能之一，这里要用的便是鼠标事件了。简单鼠标事件类型分以下几类：

mousedown/mouseup
mouseover/mouseout
mousemove
contextmenu

复杂事件类型则有以下几种：

click
dblclick

需要注意的是，复杂事件是由简单事件组成的，即一个动作可能会触发多个事件。比如，在按下鼠标按钮时，单击会首先触发 mousedown ，释放鼠标按钮时触发  mouseup 和  click 。在单个动作触发多个事件时，它们的顺序是固定的。也就是说会遵循  mousedown →  mouseup →  click 的顺序；而双击的触发顺序则为 mousedown →  mouseup →  click →  mousedown →  mouseup →  click →  dblclick 。

如果按照常用的操作习惯来处理，我们肯定希望我们的编辑器在选中内容的同时支持多选，而这个时候除了鼠标事件外我们还要捕获一些具体按键，比如 Ctrl 键。常见的鼠标事件都会在接口对象上挂有如下几个属性用于辅助判断：

属性 类型 描述 ctrlKey boolean 当事件被触发时ctrl按键被按下时为true，否则为false。 shiftKey boolean 当事件被触发时shift按键被按下时为true，否则为false。 altKey boolean 当事件被触发时alt按键被按下时为true，否则为false。 metaKey boolean 当事件被触发时meta按键被按下时为true，否则为false。

当然，一个编辑器在选中时可能还要对具体点击了元素的哪个位置进行计算，从而做不同响应，这个时候接口对象的如下几个属性既可以派上用场：

属性 类型 描述 target EventTarget 事件对应的 DOM 树顶级顶级元素 currentTarget EventTarget 挂载监听器的节点 screenX long 全局屏幕坐标系下鼠标指针的 X 轴坐标值 screenY long 全局屏幕坐标系下鼠标指针的 Y 轴坐标值 clientX long 当前（DOM 元素）坐标系下鼠标指针的 X 轴坐标值 clientY long 当前（DOM 元素）坐标系下鼠标指针的 Y 轴坐标值

关于 click 事件存在一些细节，咬文嚼字一下：

  • 事件需要在按下和释放操作时，指针设备都位于元素内。若按下之后，鼠标移动使得指针离开该元素，那么事件将会在包含两个元素的最近祖先元素（the most specific ancestor element）上触发；
  • 与 click 相关的事件都具有  which  属性，该属性允许用户获知具体哪个鼠标按钮被按下。我们不会将其用于  click 和  contextmenu  事件，因为前者只发生在左键，而后者只发生在右键。 which 有三个枚举值，1 表示左键，2表示中间按钮，3表示右键。

一些基础知识，回顾一下。

参考


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK