mousedownイベントがタッチ時のものかマウスによるものか区別するには

タッチスクリーン使用時にはtouchstartイベントだけを、マウス使用時にはmousedownイベントだけを使いたいと思います。このようなときtouchstart時にpreventDefaultを使うのが一般的のようですが、デバイス(端末の意。4/12追記)によってはタッチ後に発生するmousedownイベントを抑制できないことが分かりました。

mousedownイベントが発生してもそれがタッチによるものであれば以降の処理は行わないようにしたいのですが、タッチ時のものか見分ける方法にはどのようなものがありますか。

尚、備える入力デバイスのどれかが使えないのは望ましくなく、touchstartとmousedownの排他利用は極力避けなければなりません。（最悪の事態を想定しユーザーがどちらかを無効にできる造りにはします）

buttonsプロパティを見るのは一つの答えのようですが、多くの環境に対応させたいと思いますので使えそうな手段を教えていただけるなら多ければ多いほど有難いと存じます。

4/12追記
preventDefaultが効かないある端末にて、buttonsの動作が確認できた。タッチ時にマウス左ボタンと同じ1が返ることが判明。

html
1<!DOCTYPE html>
2<head>
3  <meta charset="UTF-8">
4  <title>mousedown</title>
5  <style>
6    body {
7      touch-action: manipulation;
8    }
9    #out {
10      position: absolute;
11      width:98%; height:88%;
12      left: 1%; bottom: 1%;
13    }
14    #btn {
15      position: absolute;
16      top: 1%; left: 1%;
17      width:98%; height:8%;
18      user-select: none;
19    }
20  </style>
21</head>
22<body>
23<button type="button" id="btn" value="">PRESS</button>
24<textarea id="out" readonly></textarea>
25
26<script type="text/javascript" crossorigin="anonymous">
27var elo = document.getElementById("out");
28var elb = document.getElementById("btn");
29
30function printtoo(str) {
31    elo.innerHTML = str + '\n' + elo.innerHTML;
32}
33
34function now(){
35  return (new Date(((new Date()).getTime())+9*3600*1000)).toISOString().slice(0,-1);
36}
37
38elb.addEventListener('touchstart', function(event){
39  //event.preventDefault(); //not work on some devices
40  printtoo('');
41  printtoo(now() + ' ' + event.timeStamp + ' ts ' + event.type);
42});
43elb.addEventListener('touchend', function(event){
44  printtoo(now() + ' ' + event.timeStamp + ' te ' + event.type);
45});
46elb.addEventListener('mousedown', function(event){
47  //event.preventDefault(); //not work
48  printtoo(now() + ' ' + event.timeStamp + ' md ' + event.type + ' ' + event.buttons);
49});
50elb.addEventListener('mouseup', function(event){
51  printtoo(now() + ' ' + event.timeStamp + ' mu ' + event.type);
52});
53elb.addEventListener('click', function(event){
54  printtoo(now() + ' ' + event.timeStamp + ' cl ' + event.type);
55});
56
57window.onerror = function (msg, url, lin, col, err) {
58  printtoo('ERROR! L'+lin+' C'+col+' MSG: '+msg);
59};
60</script>
61</body>
62</html>

行動規範の内容に同意します

回答1件

全く試していないので、実際に上手くいくかどうかはわからないのですが。

Chromeの場合はevent.sourceCapabilities.firesTouchEventsが使えそうです。
UIEvent.sourceCapabilities - Web API | MDN
InputDeviceCapabilities.firesTouchEvents - Web APIs | MDN

Firefoxの場合は、event.mozInputSourceが使えそうです。
MouseEvent.mozInputSource - Web APIs | MDN

Safari の場合は、event.webkitForceはどうでしょうか。
MouseEvent.webkitForce - Web API | MDN
ドキュメントを詳しく読んでいませんが、どうもトラックパッドの感圧にも働いてしまいそうな感じもしますので、別イベントを組み合わせた方がいいのかもしれないです。
Force Touch events - Web APIs | MDN

投稿2022/04/11 01:32