mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 23:02:54 +01:00
53f0d6320e
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
61 lines
3.0 KiB
Markdown
61 lines
3.0 KiB
Markdown
---
|
|
hide_title: true
|
|
hide_table_of_contents: true
|
|
title: Pointer position example
|
|
---
|
|
|
|
import CopyToClipboardButton from '/src/components/copytoclipboardbutton'
|
|
|
|
# Pointer position example
|
|
|
|
<div class="ndl-image-with-background xl">
|
|
|
|
<CopyToClipboardButton json={{"nodes":[{"id":"0f09b7cb-50ab-74b8-52c1-7058a0769284","type":"Javascript2","label":"Pointer Position","x":-497.981910869314,"y":389.26538248207396,"parameters":{"code":"function setPosition(e) {\n Script.Outputs.PointerX = e.clientX;\n Script.Outputs.PointerY = e.clientY;\n}\n\nScript.OnInit = function() {\n document.body.addEventListener(\"mousemove\", setPosition);\n\t document.body.addEventListener(\"mousedown\", setPosition);\n}\n\nScript.OnDestroy = function() {\n\t document.body.removeEventListener(\"mousedown\", setPosition);\n\t document.body.removeEventListener(\"mousemove\", setPosition); \n}"},"ports":[],"children":[]},{"id":"bdc3ce12-5c23-27ee-7918-ad154b20e668","type":"Number","label":"X","x":-249.18868850167155,"y":333.4616732156818,"parameters":{},"ports":[],"children":[]},{"id":"efbbb196-1b60-27f2-26c6-e7fc0d69d23d","type":"Number","label":"Y","x":-256.3223936828915,"y":481.4925282575018,"parameters":{},"ports":[],"children":[]}],"connections":[{"fromId":"0f09b7cb-50ab-74b8-52c1-7058a0769284","fromProperty":"PointerX","toId":"bdc3ce12-5c23-27ee-7918-ad154b20e668","toProperty":"value"},{"fromId":"0f09b7cb-50ab-74b8-52c1-7058a0769284","fromProperty":"PointerY","toId":"efbbb196-1b60-27f2-26c6-e7fc0d69d23d","toProperty":"value"}]}} />
|
|
|
|
|
|
</div>
|
|
|
|
This example will attach an event listener to the body element of the web page, and listen for `mousemove`.
|
|
|
|
```js
|
|
Script.OnInit = function () {
|
|
document.body.addEventListener('mousemove', (e) => {
|
|
Script.Outputs.PointerX = e.clientX
|
|
Script.Outputs.PointerY = e.clientY
|
|
})
|
|
}
|
|
```
|
|
|
|
Now lets extend this to also include the `mousedown` event, so it updates directly when a pointer event starts, not just when it moves. Since we need the same code twice we can add it to a function.
|
|
|
|
```js
|
|
function setPosition(e) {
|
|
Script.Outputs.PointerX = e.clientX
|
|
Script.Outputs.PointerY = e.clientY
|
|
}
|
|
|
|
Script.OnInit = function () {
|
|
document.body.addEventListener('mousemove', setPosition)
|
|
document.body.addEventListener('mousedown', setPosition)
|
|
}
|
|
```
|
|
|
|
We can extend this even further by removing the event listener when the JavaScript node is destroyed. This can happen when a user navigates from a page that runs this code, or when a component with this code is generated by a **Repeater** node.
|
|
|
|
```js
|
|
function setPosition(e) {
|
|
Script.Outputs.PointerX = e.clientX
|
|
Script.Outputs.PointerY = e.clientY
|
|
}
|
|
|
|
Script.OnInit = function () {
|
|
document.body.addEventListener('mousemove', setPosition)
|
|
document.body.addEventListener('mousedown', setPosition)
|
|
}
|
|
|
|
Script.OnDestroy = function () {
|
|
document.body.removeEventListener('mousedown', setPosition)
|
|
document.body.removeEventListener('mousemove', setPosition)
|
|
}
|
|
```
|