web-dev-qa-db-ja.com

反応：onClick on Mobile（iPhone）には2回のタップが必要ですか？

問題を示すビデオ

クリックすると、行に「カード」を追加するクリック可能なコンポーネントがたくさんあります。デスクトップでは正常に機能しますが、モバイルでは（iPhoneでテスト済み、Androidタブレット）の問題ではないようです）、onClick関数を呼び出すには、同じボタンを2回連続してタップする必要があります。

これらのコンポーネントには、onMouseEnter/onMouseLeave効果もあり、グローバルな状態を制御します。これにより、複数のコンポーネントに追加のCSSを適用するかどうかが決まります（単純なCSSホバー効果にすることはできません）。

マウスの影響でクリックイベントが妨げられていると思いますが、どうすれば修正できるかわかりません。このコンポーネントに関連するコードは次のとおりです。

const CardSource = ({ addCard, note, setHoveredNote, hoveredNote }) => {
  return (
    <Source
      onClick={() => addCard(note)}
      onMouseEnter={() => setHoveredNote(note)}
      onMouseLeave={() => setHoveredNote(null)}
      className={
        hoveredNote && hoveredNote.index === note.index ? "highlight" : null
      }
    >
      {note.letters[0]}
    </Source>
  );
};

さらに、ボタンhasが2回タップされると、ホバー効果CSSはそのボタンに「くっつき」、決して移動しません別のボタン。これはiPhoneとAndroidタブレットの両方で発生するようです。これも発生しないようにしたいと思います。

私はサンドボックスでこの問題の実用的なデモを作成しました。モバイルで表示すると、これらの問題を再現できます： https://codesandbox.io/s/mobile-requires-2-taps- i9zri？file =/src/Components/CardSource/CardSource.js

javascriptandroidiosreactjsmobile
7
damon

hoverイベントを介してクラスを追加するのではなく、css onMouseEnterを使用するだけで、2つのタップの問題が修正されます。

サンドボックスへのリンク

プログラムでホバーのトリガーを使用する場合。 2つのクリックの問題は、onTouchEndイベント（サンドボックスでコメント）を使用して解決できます。

お役に立てば幸いです。

0
iveedee

タッチを計算するには、イベントonTouchStart、onTouchMove、onTouchEndを使用します。

0
Michael Mishin

同様の問題があったことを覚えています。問題は、コンポーネントの state がすぐには変更されず、render()メソッドの実行時にのみ変更されることでした。あなたが説明している両方の効果について、非同期性に関して同じ問題が発生する可能性があると思います。

あなたのコードで見つけた唯一のrender()呼び出しは App.test.js 、私は通常それをそれぞれのcomponent.tsx。

参考文献

0
B--rian