2

シナリオ：

Javascript カスタム イベントの解決策を求めて Web を閲覧しているときに、実用的な例を見つけることができず、MDN リソースでさえ本当に限られています。

paperjs の onMouseDrag イベントを再構築しようとしています。私の使用目的は、ペイントのような Web アプリケーションです。

onMouseDrag イベントは次の場合に発生します。

  • マウスの左ボタンが押されている
  • マウスが動いている

ゴール：

ここでの目標は、機能するイベントを開催することではありませんonMouseDrag。目標は、を作成する方法の明確な説明と例CustomEventを持つことです。onMouseDragイベントは例としてのみ存在します。

要件：

  1. 答えはvanilla-jsまたはplain jsにあるはずです。（jQueryやその他のライブラリはありません）
  2. 回答では、非推奨のメソッドではなく、new CustomEvent()orを使用する必要があります。new Event()
  3. mousedrag が呼び出されたときに渡されるイベント引数は、mousemove が受け取るイベント引数と同じでなければなりません。

コード：

私は次のことを試しました

var onMouseDrag = new CustomEvent('mousedrag'),
    elem = document.getElementById('element'),
    mousedown = false;

elem.addEventListener('mousedrag', function (event) {
    // The event argument passed should be 
    // the same event as the event passed by any other mouse event.

    // Do something while the mouse is being dragged.
});

elem.addEventListener('mousedown', function (event) {
    mousedown = true;
});

elem.addEventListener('mouseup', function (event) {
    mousedown = false;
});

elem.addEventListener('mousemove', function (event) {
    if (mousedown) {
        elem.dispatchEvent('mousedrag');
        // Pass the event variable to the dispatched mousedrag.
    }
});
4

2 に答える 2