$w.ClickableMixin

$w.ClickableMixin

Provides functionality for elements that can be be clicked.

Contents

onClick( ) Adds an event handler that runs when the element is clicked.
onDblClick( ) Adds an event handler that runs when the element is double-clicked.
onClick( )

onClick( )

Adds an event handler that runs when the element is clicked.

function onClick(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: Function): void

Description

An element receives a click event when a user clicks on the element and releases.

When a user double-clicks an element, two click events are fired before a doubleClick event is also fired.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element is clicked.
event MouseEvent The mouse event that occurred.
$w $w Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element to which the event handler was added.

Examples

Get the ID of the element that was clicked

JHcoIiNteUVsZW1lbnQiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IHRhcmdldElkID0gZXZlbnQudGFyZ2V0LmlkOyAgLy8gIm15RWxlbWVudCIKfSApOwo=
$w("#myElement").onClick( (event, $w) => {
  let targetId = event.target.id;  // "myElement"
} );

Get a mouse click's coordinates

JHcoIiNteUVsZW1lbnQiKS5vbkNsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IGNsaWVudFggPSBldmVudC5jbGllbnRYOyAgLy8gMzYyCiAgbGV0IGNsaWVudFkgPSBldmVudC5jbGllbnRZOyAgLy8gMjQ0CiAgbGV0IG9mZnNldFggPSBldmVudC5vZmZzZXRYOyAgLy8gMTAKICBsZXQgb2Zmc2V0WSA9IGV2ZW50Lm9mZnNldFk7ICAvLyAxMgogIGxldCBwYWdlWCA9IGV2ZW50LnBhZ2VYOyAgICAgIC8vIDM2MgogIGxldCBwYWdlWSA9IGV2ZW50LnBhZ2VZOyAgICAgIC8vIDM3NgogIGxldCBzY3JlZW5YID0gZXZlbnQuc2NyZWVuWDsgIC8vIDM4OTcKICBsZXQgc2NyZWVuWSA9IGV2ZW50LnNjcmVlblk7ICAvLyAzNjIKfSApOwo=
$w("#myElement").onClick( (event, $w) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

See Also

onDblClick( )

onDblClick( )

onDblClick( )

Adds an event handler that runs when the element is double-clicked.

function onDblClick(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: Function): void

Description

An element receives a dblClick event when a user double-clicks on the element and releases.

When a user double-clicks an element, two click events are fired before a doubleClick event is also fired.

Parameters

handler function(event, $w) The name of the function or the function expression to run when the element is clicked.
event MouseEvent The mouse event that occurred.
$w $w Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

Return Value

Element The element to which the event handler was added.

Examples

Get the ID of the element that was double-clicked

JHcoIiNteUVsZW1lbnQiKS5vbkRibENsaWNrKCAoZXZlbnQsICR3KSA9PiB7CiAgbGV0IHRhcmdldElkID0gZXZlbnQudGFyZ2V0LmlkOyAvLyAibXlFbGVtZW50Igp9ICk7Cg==
$w("#myElement").onDblClick( (event, $w) => {
  let targetId = event.target.id; // "myElement"
} );

See Also

onClick( )