[javascript]iframeをまたがったtouchstartの検出

Question

現在、ページ内に複数のiframeが存在するようなHTMLを作成中です。
そしてこのページ上をタッチしている指の本数を取得したいのですが、「1本目がiframe_A上、2本目がiframe_B上」のように、iframeをまたいでタッチを行うと、最初にタッチしたiframe上でしかtouchstartが検出できません。
全てのiframe上でtouchstartを検出する方法はないのでしょうか？

なお、現在touchstartの検出は各iframe内で行っています。
(親のからはiframe内のタッチを検出できなかったので)
また、ブラウザはChrome、使用しているハードはSurfaceです。

よろしくお願いします。

Comments

[退会済みユーザー]

https://teratail.com/blog/article/ba10

Answer 1

ちょっと動き検証してみましたがきつそうですね。
あるフレームに１本でも指がある状態だと、他のフレームに触れても一切タッチイベントが発生しないということですか…。
意図しないフレームで検出されてしまうならまだしも、いずれのフレームでも一切のイベントが発生しないとなるとどうにもしがたいところですね。

例えば逆に、フレームは存在するけどタッチできないように透明なブロックでトップフレーム全体を覆ってしまって、
透明ブロックのタッチイベントを各フレームに対して転送するというのはどうでしょうか。
これだと他のいろいろな操作に支障が出て、たとえばスクロールすら自前で実装しなきゃいけなくなりそうですが…。

Comments

[tozjp]

あ、スクロールに関してのみ言えば、スクロール範囲がフレームと同じ大きさのブロック（overflow: scroll）をフレーム上にピッタリ重ねて、スクロールイベントでスクロール位置を転送すれば多少楽かもしれません。
そもそも iframe ではなく overflow:hidden なブロックでは代替できませんか？
同じ Window 内で実装可能ならもっと単純なのではないかと。

[zky]

やはり、複数フレーム間のタッチの検出は難しいのですね・・・
iframeを使わないとなると根幹部分から作り直しが必要になってしまうので、フレームをまたがるタッチをするときのみ透明なブロックを前面に出す方法で実装を進めてみます。

アドバイスありがとうございました！