0

正方形の div を作成し、画面上の div でポインター ダウン イベントをトリガーしているポインターの数を知りたい。ポインター イベントには event.touches.length のようなプロパティがないため、カウンター変数を使用して div 内で指が押された回数 (つまり、ポインター ダウン イベント) を計算し、これらの条件を達成
します。 3. div 内でポインターを下に移動し (カウンタープラス 1)、div 内でポインターを
離し、カウンター マイナス 1 をします。
div、counter はまだマイナス 1 です。
4. div の外側でポインターを下に、ポインターを上にすると (外側をクリック)、counter は何もしません。

私のプログラムは次のようなものです：

var elem, counter,
    onDown, onUp,
    animate;

counter = 0;

onDown = function () {
    var body;
  
    body = document.body;
  
    counter++;

//    body.addEventListener('mouseup', onUp, false);
    body.addEventListener('pointerup', onUp, false);
};
onUp = function () {
    var body;
  
    body = document.body;

    counter--;

//    body.removeEventListener('mouseup', onUp);
    body.removeEventListener('pointerup', onUp);
};

elem = document.getElementById('square');
//elem.addEventListener('mousedown', onDown, false);
elem.addEventListener('pointerdown', onDown, false);

animate = function () {
  // Use different color according to the number of fingers
  // How many fingers are trigger pointer down inside the div,
  // and not released yet.
  // (Include the finger which is moved outside after 
  //  pointer down inside the div)
  switch (counter) {
    case 1:
        elem.style.backgroundColor = 'red';
        break;
    case 2:   
        elem.style.backgroundColor = 'yellow';
        break;
    case 3:
        elem.style.backgroundColor = 'blue';
        break;
    case 4:
        elem.style.backgroundColor = 'black';
        break;
    default:
        elem.style.backgroundColor = 'white';

  }
  requestAnimationFrame(animate);
};

animate();
#square {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}
<div id="square"></div>

通常、マウスは 1 つしか使用しないため、問題は発生していません。しかし、ポインターイベントで問題が発生しました。たとえば、左手の人差し指が div 内に触れると、ポインター ダウン イベントがトリガーされ、カウンターが 1 になりました。しかし、右手の人差し指がdivの外側で「クリック」すると、ここでポインターアップイベントがトリガーされるため、カウンターが間違った番号0を取得します（左の人差し指はまだ押されています）

カウンターに影響を与えるために、div の外で発生したクリック イベント (pointerdown と pointerup は両方とも div の外で発生します) は望ましくありません。

ポインター アップ イベントがどのポインター ダウン イベントに関連付けられているかを判断する方法がある場合は?

タッチ開始イベントとタッチ終了イベントのイベント対象が同じであるように、それらが関連していることがわかります。

前もって感謝します。

4

1 に答える 1

0

pointerId質問は古いので、これは簡単に説明しますが、さまざまなポインターイベントで取得するさまざまな s を追跡することで、問題を解決できると思います。この MSDN ページ、具体的には次のコード スニペットもご覧ください。

function pointerdownHandler (evt) {
      evt.target.setPointerCapture(evt.pointerId);
}
于 2015-07-23T00:59:20.530 に答える