<p data-line="0" class="code-line">タイトルが言いたいことの10割。</p>
<p data-line="2" class="code-line">とあるウェブアプリが、タッチパネル付きノートパソコンのトラックパッド操作で動作しなかったのでソースを見たところ、<code>'ontouchstart' in document</code> でタッチ対応と判別したら<code>touchstart</code>/<code>touchend</code>を利用、非対応なら<code>mousedown</code>/<code>mouseup</code>を利用、という処理をしていた。<br>
最近のブラウザなら<code>pointerdown</code>/<code>pointerup</code>を使えば、タッチ操作でも、マウス操作でも、タッチ対応デバイスのマウス操作でも対応できるのになぁ。</p>
<p data-line="5" class="code-line">軽くググってみると mouse イベントと touch イベントをいかに同居させるか、というアプローチがかなり多いので、この記事で「pointer イベントという選択肢もあるよ」という情報を増やしておく。</p>
<p data-line="7" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/abebf3d55f88-20250323.png" loading="lazy" class="md-img"></p>
<p data-line="9" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__3d3e4cf469ea8" src="https://embed.zenn.studio/card#zenn-embedded__3d3e4cf469ea8" data-content="https%3A%2F%2Fwww.w3.org%2FTR%2Fpointerevents%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.w3.org/TR/pointerevents/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.w3.org/TR/pointerevents/</a></p>
<p data-line="11" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__214f09e5f09ec" src="https://embed.zenn.studio/card#zenn-embedded__214f09e5f09ec" data-content="https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FPointer_events" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events</a></p>


Javascript でマウス＆タッチ両対応なら pointer イベントを使おうよ、古いブラウザを見捨ててもよいならね

juner

<p data-line="0" class="code-line">むしろドラッグ操作する場合は pointerevent ならsetPointerCapture() すれば要素を超えても安心みたいなのがある。</p>


Discussion