ポインター位置の例

この例では、イベントリスナーをウェブページのbody要素にアタッチし、mousemoveをリッスンします。

Script.OnInit = function () {
    document.body.addEventListener('mousemove', (e) => {
        Script.Outputs.PointerX = e.clientX
        Script.Outputs.PointerY = e.clientY
    })
}

これを mousedown イベントを含むように拡張しましょう。これにより、ポインターイベントが開始されるとすぐに更新され、移動したときだけでなく更新されます。同じコードが2回必要なので、関数に追加しましょう。

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)
}

JavaScriptノードが破棄されたときにイベントリスナーを削除することで、これをさらに拡張することができます。これは、このコードを実行するページからユーザーがナビゲートしたとき、または Repeater ノードによって生成されたコンポーネントにこのコードがあるときに発生する可能性があります。

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)
}