JavaScript Graphics Library (JSGL.org) Draw and move interactive vector graphics easily in Javascript!

Mouse Event class (jsgl.MouseEvent)

Whenever user performs mouse interaction with either jsgl.Panel instance or jsgl.elements.AbstractElement instance, jsgl.MouseEvent objects are generated by the core of JSGL. These are then passed to the event listeners registered by add…Listener() methods on either the panel or the element.

Public Constants

Here are some built-in constants for distinguishing between different types of mouse events.

Name Type Description
jsgl.MouseEvent.UNKNOWN Number Unknown type of event (indicates possible error).
jsgl.MouseEvent.CLICK Number Click mouse event type. Indicates that mouse button has been pushed and released at some location within the element.
jsgl.MouseEvent.DOUBLE_CLICK Number Double-click mouse event type. Indicates that mouse button has been pushed and released twice at some location within the element.
jsgl.MouseEvent.DOWN Number Mouse-down event type. Indicates that mouse button has been pushed at some location within the element.
jsgl.MouseEvent.UP Number Mouse-up event type. Indicates that mouse button has been released at some location within the element.
jsgl.MouseEvent.MOVE Number Mouse-move event type. Indicates that the mouse has moved at some location within the element.
jsgl.MouseEvent.OVER Number Mouse-over event type. Indicates that the mouse has entered the element.
jsgl.MouseEvent.OUT Number Mouse-out event type. Indicates that the mouse has left the element.
jsgl.MouseEvent.CONTEXTMENU Number Context-menu event type. Indicates that the mouse has been right-clicked.

Method Summary

Name Description
getX() : Number Gets the X-coordinate of the location at which the event took place.
getY() : Number Gets the Y-coordinate of the location at which the event took place.
getLocation() : jsgl.Vector2D Gets the location at which the event took place as an instance of jsgl.Vector2D object.
getSourceElement() : jsgl.elements.AbstractElement Gets the JSGL element on which the event took place.
getEventType() : Number Gets the type of the event in processing of which the current mouse event object has been generated.
isAltKey() : Boolean Tests if the Alt key was pressed when the current mouse event occurred.
isCtrlKey() : Boolean Tests if the Ctrl key was pressed when the current mouse event occurred.
isShiftKey() : Boolean Tests if the Shift key was pressed when the current mouse event occurred.
isMetaKey() : Boolean Tests if the Meta key was pressed when the current mouse event occurred.

Method Detail

getX() : Number

Gets the X-coordinate of the location at which the event took place.

Returns

Number

Example

Set the X-coordinate of the circle's center when the panel is clicked:

myPanel.addClickListener(function(eventArgs) {
    myCircle.setCenterX(eventArgs.getX());
  });
myPanel.setCursor(jsgl.Cursor.E_RESIZE);

The above-code can be used to produce something like this:

Since

version 2.0

getY() : Number

Gets the Y-coordinate of the location at which the event took place.

Returns

Number

Example

Example

Set the Y-coordinate of the circle's center when the panel is clicked:

myPanel.addClickListener(function(eventArgs) {
    myCircle.setCenterY(eventArgs.getY());
  });
myPanel.setCursor(jsgl.Cursor.N_RESIZE);

The above-code can be used to produce something like this:

Since

version 2.0

getLocation() : jsgl.Vector2D

Gets the location at which the event took place as an instance of jsgl.Vector2D object.

Returns

Example

Move the circle at the location where the mouse has been clicked:

myPanel.addClickListener(function(eventArgs) {
    myCircle.setCenterLocation(eventArgs.getLocation());
  });
myPanel.setCursor(jsgl.Cursor.CROSSHAIR);

The above-code can be used to produce something like this:

Since

version 2.0

getSourceElement() : jsgl.elements.AbstractElement

Gets the JSGL element on which the event took place. If there is no such element, e.g. if the event has been captured at an empty part of a jsgl.Panel object's viewport, null is returned.

Returns

Example

Report the element which has been clicked:

var handler = function(eventArgs) {
  switch(eventArgs.getSourceElement()) {
    case myCircle:
      myLabel.setText('circle');
      break;
    case myPolygon:
      myLabel.setText('polygon');
      break;
    case myRect:
      myLabel.setText('rectangle');
      break;
    default:
      myLabel.setText('(none)');
      break;
  }
}
 
myPanel.addClickListener(handler);

The above-code can be used to create something like this:

Since

version 2.0

getEventType() : Number

Gets the type of the event in processing of which the current mouse event object has been generated.

Returns

Number – see the public constants for distinguishing mouse events

Example

Report the event type that took place on the circle using label element:

var handler = function(eventArgs) {
  var text;
  switch(eventArgs.getEventType()) {
    case jsgl.MouseEvent.CLICK:
      text = "click";
      break;
    case jsgl.MouseEvent.DOUBLE_CLICK:
      text = "double click"
      break;
    case jsgl.MouseEvent.DOWN:
      text = "mouse down";
      break;
    case jsgl.MouseEvent.UP:
      text = "mouse up";
      break;
    case jsgl.MouseEvent.MOVE:
      text = "mouse move";
      break;
    case jsgl.MouseEvent.OVER:
      text = "mouse over";
      break;
    case jsgl.MouseEvent.OUT:
      text = "mouse out";
      break;
  }
  myLabel.setText(text + " (" + eventArgs.getX() + "," + eventArgs.getY() + ")");
}
 
myRect.addClickListener(handler);
myRect.addDoubleClickListener(handler);
myRect.addMouseDownListener(handler);
myRect.addMouseUpListener(handler);
myRect.addMouseMoveListener(handler);
myRect.addMouseOverListener(handler);
myRect.addMouseOutListener(handler);

The above-code can be used to produce something like this:

Since

version 2.0

See Also

 
mouse-event.txt · Last modified: 2016/05/08 16:45 by John English
 
Except where otherwise noted, content on this wiki is licensed under the following license: GNU Free Documentation License 1.3
Driven by DokuWiki Powered by PHP Valid XHTML 1.0 Valid CSS