2009
Jun
15

Mouse Events

  • onMouseDown: A mouse button has been pressed.
  • onMouseMove: The mouse has been moved.
  • onMouseOut: The mouse pointer has left an element.
  • onMouseOver: The mouse pointer has entered an element.
  • onMouseUp: A mouse button has been released.
  • onClick: One mousedown and one mouseup detected on this element.
  • onDbClick: A mouse button has been double-clicked (clicked twice rapidly).

Mouse Event Properties

Property Name Description
button A number that specifies which mouse button changed state during a mousedown, mouseup, or click event. A value of 0 indicates the left button, 1 indicates the middle button, and 2 indicates the right button.
altKey, ctrlKey, metaKey, shiftKey These four boolean fields indicate whether the Alt, Ctrl, Meta, or Shift keys were held down when a mouse event occurred.
clientX/clientY Specify the X and Y coordinates of the mouse pointer, relative to the upper-left corner of the browser's viewport and do not take document scrolling into account.
screenX/screenY Specify the X and Y coordinates of the mouse pointer, relative to the upper-left corner of the user's monitor. These values are useful if you plan to open a new browser window at or near the location of the mouse event.
relatedTarget This property refers to a node that is related to the target node of the event. For mouseover events, it is the node that the mouse left when it moved over the target. For mouseout events, it is the node that the mouse entered when leaving the target.
W3C Standard Internet Explorer Description
button button Still an integer value but the button value is interpreted differently in IE. A value of 0 indicates none, 1 indicates the left button, 2 indicates the right button, 3 indicates the left and right buttons, 4 indicates middle button, 5 indicates the left and right buttons, 6 indicates the middle and right buttons, 7 indicates the left, middle, and right buttons.
relatedTarget fromElement
toElement
fromElement specifes the document element that the mouse came from for mouseover events. toElement specifies the document element that the mouse has moved to for mouseout events.

clientX/clientY

Example
  1. function onMouseDownHandler(event) {
  2. var e = event || window.event; // IE stores events in window object.
  3. var mouseObj = {left: e.clientX, top: e.clientY}; // Store the position of the mouse object.
  4. }
  5. element.onmousedown = onMouseUpHandler;

currentTarget and relatedTarget/fromElement and toElement

Example
  1. var GENERIC = {
  2. findCurrentTarget: function(event, node) {
  3. var currentTarget;
  4. if (window.event) { // For IE
  5. currentTarget = node;
  6. } else if (event && event.currentTarget) { // For Firefox, Opera
  7. currentTarget = event.currentTarget;
  8. }
  9. return currentTarget;
  10. },
  11. findRelatedTarget: function(event) {
  12. var relatedTarget;
  13. if (window.event) { // For IE
  14. if (window.event.type === "mouseover") {
  15. relatedTarget = window.event.fromElement;
  16. } else if (window.event.type === "mouseout") {
  17. relatedTarget = window.event.toElement;
  18. }
  19. } else if (event && event.relatedTarget) { // For Firefox
  20. relatedTarget = event.relatedTarget;
  21. }
  22. return relatedTarget;
  23. }
  24. };

View Demo

Convert Mouse Coordinates

Example
  1. var CSS = {
  2. // Return the position of the element relative to the top-left corner of the document.
  3. offset: function(element) {
  4. if (!element) {
  5. return;
  6. }
  7. if (typeof element === "string") {
  8. element = document.getElementById(element);
  9. }
  10. //var elem = element;
  11. var left = 0, top = 0;
  12. /*while (elem.offsetParent) {
  13. left += elem.offsetLeft;
  14. top += elem.offsetTop;
  15. elem = elem.offsetParent;
  16. }*/
  17. for (var elem = element; elem; elem = elem.offsetParent) {
  18. left += elem.offsetLeft;
  19. top += elem.offsetTop;
  20. }
  21. for (elem = element.parentNode; elem && elem != document.body; elem = elem.parentNode) {
  22. if (elem.scrollLeft) {
  23. left -= elem.scrollLeft;
  24. }
  25. if (elem.scrollTop) {
  26. top -= elem.scrollTop;
  27. }
  28. }
  29. return {left:left, top:top};
  30. }
  31. };

Drag and Drop

drag() takes two arguments. The first is the element that is to be dragged. This may be the element on which the mousedown event occurred or a containing element (e.g., you might allow the user to drag on the titlebar of a window to move the entire window). In either cases, it muse refer to a document element that is absolutely positioned using the CSS position attribute. The second argument is the event object associated with the triggering mousedown event.

drag() records the position of the mousedown event and then registers event handlers for the mousemove and mouseup events that follow the mousedown event. The handler for the mousemove event is responsible for moving the document element, and the handler for the mouseup event is responsible for deregistering itself and the mousemove handler. It is important to note that the mousemove and mouseup handlers are registered as capturing event handlers because the user may move the mouse faster than the document element can follow it, and some of these events occur outside the original target element. Without capturing, the events may not be dispatched to the correct handlers. Also, note that the moveHandler() and upHandler() functions that are registered to handle these events are defined as functions nested within drag(). Because they are defined in this nested scope they can use the arugments and local variables of drag(), which considerably simplifies their implementation.

View Demo

Key Events

  • onKeyDown: A keyboard key is pressed.
  • onKeyPress: A keyboard key is pressed or held down.
  • onKeyUp: A keyboard key is released.

charCode and keyCode

charCode is the integer property specifies for keydown and keyup events and Unicode character code for keypress events. Use String.fromCharCode() to convert character codes to strings.

View Demo

Related Posts


回應 (Leave a comment)