鼠标事件问题_鼠标事件

鼠标事件问题

See more on JavaScript events

进一步了解JavaScript事件

When looking at mouse events we have the ability to interact with

在查看鼠标事件时，我们可以与之交互

• mousedown the mouse button was pressed

  mousedown鼠标按钮

• mouseup the mouse button was released

  mouseup释放了鼠标按钮

• click a click event

  click点击事件

• dblclick a double click event

  dblclick双击事件

• mousemove when the mouse is moved over the element

  将鼠标移到元素上时mousemove

• mouseover when the mouse is moved over an element or one of its child elements

  将鼠标移到一个元素或其子元素之一上时的mouseover

• mouseenter when the mouse is moved over an element. Similar to mouseover but does not bubble (more on this soon!)

  将鼠标移到元素上时的mouseenter 。 与mouseover类似，但不会冒泡(稍后会更多！)

• mouseout when the mouse is moved out of an element, and when the mouse enters a child elements

  将鼠标移出元素时，以及进入子元素时的mouseout

• mouseleave when the mouse is moved out of an element. Similar to mouseout but does not bubble (more on this soon!)

  将鼠标移出元素时的mouseleave 。 与mouseout类似，但不会冒泡(稍后会更多！)

• contextmenu when the context menu is opened, e.g. on a right mouse button click

  contextmenu时上下文菜单打开时，如在点击鼠标右键

Events overlap. When you track a click event, it’s like tracking a mousedown followed by a mouseup event. In the case of dblclick, click is also fired two times.

事件重叠。 跟踪click事件时，就像跟踪mousedown事件和mouseup事件一样。 在dblclick的情况下， click也被触发两次。

mousedown, mousemove and mouseup can be used in combination to track drag-and-drop events.

mousedown ， mousemove和mouseup可以组合使用来跟踪拖放事件。

Be careful with mousemove, as it fires many times during the mouse movement. We need to apply throttling, which is something we’ll talk more when we’ll analyze scrolling.

小心mousemove ，因为它在鼠标移动期间会触发多次。 我们需要应用节流 ，这是我们在分析滚动时将要讨论的更多内容。

When inside an eventh handler we have access to lots of properties.

在一个偶数处理程序中，我们可以访问许多属性。

For example on a mouse event we can check which mouse button was pressed by checking the button property of the event object:

例如，在鼠标事件中，我们可以通过检查事件对象的button属性来检查按下了哪个鼠标按钮：

const link = document.getElementById('my-link')
link.addEventListener('mousedown', event => {
// mouse button pressed
console.log(event.button) //0=left, 2=right
})

Here are all the properties we can use:

这是我们可以使用的所有属性：

• altKey true if alt key was pressed when the event was fired

  altKey如果触发事件时按下alt键， altKey true

• button if any, the number of the button that was pressed when the mouse event was fired (usually 0 = main button, 1 = middle button, 2 = right button). Works on events caused by clicking the button (e.g. clicks)

  如果有button则为触发鼠标事件时按下的按钮编号(通常为0 =主按钮，1 =中间按钮，2 =右键)。 对通过单击按钮引起的事件起作用(例如，单击)

• buttons if any, a number indicating the button(s) pressed on any mouse event.

  buttons如果有)，数字表示在任何鼠标事件中按下的按钮。

• clientX / clientY the x and y coordinates of the mouse pointer relative to the browser window, regardless of scrolling

  clientX / clientY鼠标指针相对于浏览器窗口的x和y坐标，与滚动无关

• ctrlKey true if ctrl key was pressed when the event was fired

  ctrlKey如果触发事件时按下ctrl键，则为true

• metaKey true if meta key was pressed when the event was fired

  metaKey如果触发事件时按下了meta键， metaKey true

• movementX / movementY the x and y coordinates of the mouse pointer relative to the position of the last mousemove event. Used to track the mouse velocity while moving it around

  movementX / movementY x和相对于最后mousemove事件的位置的鼠标指针的y坐标。 用于在移动鼠标时跟踪鼠标速度

• region used in the Canvas API

  Canvas API中使用的region

• relatedTarget the secondary target for the event, for example when moving

  relatedTarget事件的次要目标，例如在移动时

• screenX / screenY the x and y coordinates of the mouse pointer in the screen coordinates

  screenX / screenY屏幕坐标中鼠标指针的x和y坐标

• shiftKey true if shift key was pressed when the event was fired

  shiftKey如果触发事件时按下Shift键，则为true

翻译自: https://flaviocopes.com/mouse-events/

鼠标事件问题