Mouse Events Basics
JavaScript Mouse Events Basics （JavaScript鼠标事件基础知识）
In this chapter, we are going to get into more details about the mouse events, along with their properties. （在本章中，我们将详细介绍鼠标事件及其属性。）
Mouse events belong to the most common and significant event types. Mouse event object can be defined as a unity of events that happen when the mouse interacts with the HTML document. （鼠标事件属于最常见和最重要的事件类型。 鼠标事件对象可以定义为当鼠标与HTML文档交互时发生的事件的统一。）
Please note that the naming “mouse events” doesn’t consider that the events may come only from “mouse devices”. They can also come from phones, tablets, and other devices. （请注意，命名“鼠标事件”并不认为事件可能仅来自“鼠标设备”。它们也可以来自手机、平板电脑和其他设备。）
The Types of Mouse Events
The Types of Mouse Events （鼠标事件的类型）
As a rule, mouse events are split into two categories: simple and complex.
Simple Events
The simple events are considered the most used ones. （简单的事件被认为是最常用的事件。）
So, the simple events are:
mousedown/mouseup: the mouse button is clicked or released over an element.
mouseover/mouseout: the pointer of the mouse comes over or out of an element.
mousemove: each move of the mouse triggers the event.
contextmenu: it triggers when an attempt of opening a context menu is detected. Commonly, it happens when the user presses the right button of the mouse.However, there are other means of opening the context menu ( for instance, using a specific keyboard key but it doesn’t belong to mouse events).
Complex Events
Complex Events （复杂事件）
The complex events are the following:
click: it is activated after mousedown and then mouseup over the same element when the left button of the mouse is used.
dblclick: it triggers when a double click over an element is performed.
The basis of the complex events are simple ones. Hence, complex events are made of the simple complex. Theoretically, programmers can live without them. But their existence makes the lives of programmers easier, as they are very convenient. （复杂事件的基础很简单。因此，复杂事件是由简单复杂构成的。从理论上讲，程序员可以在没有他们的情况下生活。但它们的存在使程序员的生活更轻松，因为它们非常方便。）
Events Order
Events Order （活动顺序）
Multiple events can be triggered by an action. For example, an initial click triggers mousedown at the moment the button is pressed. Afterward, comes the mouseup and click when it is released. （一个操作可以触发多个事件。例如，初始单击会在按下按钮时触发mousedown。然后，出现鼠标，并在释放时单击。）
In the cases when multiple events are initiated by a single action, their order is fixed. It means that the handlers are called in the following sequence: mousedown → mouseup → click .
Getting the button: which
Getting the button: which
The click-related events always contain the which property, allowing to get a particular mouse button. You needn’t use it for the events related to click and contextmenu . （与点击相关的事件始终包含which属性，允许获取特定的鼠标按钮。您无需将其用于与单击和上下文菜单相关的事件。）
But, in the event of tracking mousedown and mouseup ,it will be necessary. The reason is that such events trigger on any button. So, which will allow distinguishing between “right-mousedown” and “left-mousedown” . （但是，在跟踪mousedown和mouseup的情况下，这将是必要的。原因是此类事件在任何按钮上都会触发。因此，这将允许区分“right-mousedown”和“left-mousedown”。）
The possible three values are as follows:
The left button - event.which == 1 . The middle button- event.which == 2 . The right button - event.which == 3 . （左键- event.which = = 1。 中间按钮- event.which = = 2。 右键- event.which = = 3。）
However, the middle button is rarely used. （但是，很少使用中间按钮。）
Modifiers: shift, alt, ctrl and meta
Modifiers: shift, alt, ctrl and meta
All the mouse events have information about pressed modifier keys. （所有鼠标事件都包含有关按下修饰键的信息。）
The properties of the events are:
shiftKey: Shift
altKey: Alt (or Opt for Mac)
ctrlKey: Ctrl
metaKey:for Mac - Cmd
When the matching key is pressed during the event, the properties above are true. （事件期间按下匹配键时，上述属性为true。）
Let’s take an example, where the button works on Ctrl+Shift+click:
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<button id="button">Ctrl+Shift+Click on me!</button>
<script>
button.onclick = function(event) {
if(event.ctrlKey && event.shiftKey) {
alert('Welcome!');
}
};
</script>
</body>
</html>
Please, consider that for Mac, Cmd is used instead of Ctrl.On Mac, there is another Cmd that corresponds to the property metaKey. So, in places where Windows user presses Ctrl+Enter or Ctrl+A, a user of MAC should press Cmd+Enter or Cmd+A. So, anytime it is necessary to support combinations, such as Ctrl+click, for MAC it makes sense using Cmd+click. （请注意，对于Mac ，使用Cmd而不是Ctrl.On Mac ，还有另一个Cmd对应于属性metaKey。因此，在Windows用户按下Ctrl + Enter或Ctrl + A的地方， MAC用户应按下Cmd + Enter或Cmd + A。因此，任何时候都需要支持组合，例如Ctrl +单击，对于MAC ，使用Cmd +单击是有意义的。）
Coordinates: clientX/Y, pageX/Y
Coordinates: clientX/Y, pageX/Y
The overall mouse events have coordinates in the following two flavours:
clientX and clientY that are window-relative. （-与窗口相对的clientX和clientY。）
pageX and pageY that are document-relative. （-与文档相关的pageX和pageY。）
Let’s say you have a window with the size 500x500. The mouse is in the left-upper corner. In this case, clientX and clientY are equal to 0. When the mouse is in the center, clientX and clientY are equal to 250, no matter how far the document has been scrolled. It is like position:fixed .
The document related coordinates, such as pageX , pageY should be counted from the left-upper corner of the document. （与文档相关的坐标（如pageX、pageY ）应从文档的左上角开始计数。）
Disabling Selection
Disabling Selection （禁用选择）
Double-mouse click is not free from side effects. It is disturbing in several interfaces: it selects text.
For example, a double-click on the text mentioned below will select it in addition to the handler:
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<span ondblclick="alert('dblclick')">Double click me</span>
</body>
</html>
In case you press the left button of the mouse without releasing it, the mouse will be moved, which can make an unwanted selection. （如果您按下鼠标左键而不松开它，鼠标将被移动，这可能会产生不必要的选择。）
There are different ways to overcome unwanted selections. In the case above, the best solution is preventing the browser action on mousedown . It will prevent the following selections:
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<b ondblclick="alert('Click!')" onmousedown="return false">
Double-click me
（双击我）
</b>
</body>
</html>
Prevent Copying
In case you intend to disable selection with the purpose of protecting your page from copy-pasting, the oncopy event can be used, like this:
<!DOCTYPE html>
<html>
<head>
<title>Title of the Document</title>
</head>
<body>
<div oncopy="alert('Copying forbidden!');return false">
Dear user, The copying is forbidden for you.
（尊敬的用户，禁止复制。）
</div>
</body>
</html>
So, after that, copying a piece of text from <div> will not be possible. Of course, if the user, who has access to the HTML-source, will be able to get the content from there.
Summary
Summary （概要）
So, mouse events are one of the most common and significant event types. They can be of two types: simple and complicated. As complicated events are based on the simple ones, theoretically you can work without them. But they are very convenient in usage and can make your work much easier.
As for the mouse events properties, they are the following:
The button: which.
The modifier keys, such as ctrlKey, altKey,shiftKey , as well as metaKey (for Mac). （-修改键，如ctrlKey、altKey、shiftKey以及metaKey （适用于Mac ）。）
The window-relative coordinates, such as clientX/clientY . （-窗口相对坐标，例如clientX/clientY。）
The document-relative coordinates, such as pageX/pageY . （-文档相对坐标，例如pageX/pageY。）