1

インターフェイスをクリーンアップするために、CSS ホバー トリックを使用しています。コントロールは、カーソルが要素内にある場合にのみ表示されます。タッチ スクリーン デバイスでインターフェイスを使用しているときに問題が発生しています。コントロール ボタンが表示されていない場合、display:noneあるべき場所に触れても、ボタンに対してイベントがトリガーされます。

ブラウザとタッチスクリーンデバイスの両方でこのフィドルを試して、私が何を意味するかを確認してください... http://jsfiddle.net/6PvCn/2/

タッチスクリーン デバイスでは、赤い四角をタッチすると、ボタンが表示されなくてもアラートが発生します。デスクトップの Android Emulator と実際の Android 2.3 フォンの両方でこれをテストしました。

私が目指している効果は、ユーザーがボタンの「ある」場所に触れたとしても、ボタンが発火せずに最初に表示されることです。

JavaScript に頼る前に、純粋な CSS ソリューションを使用したいと思います。

4

5 に答える 5

1

pointer-events: none;一緒にやってみるdisplay: none;

于 2013-03-11T18:34:13.683 に答える
0

これが私が思いついた解決策です... http://jsfiddle.net/6PvCn/7/

Android タッチスクリーン (IOS については不明) では、hover非表示の要素が表示されていない場合、そのイベントは発生しません。hoveredしたがって、基本的には、要素が以前にあったかどうかを確認しますclicked。

手短に

$(".hidden").hover(function(e) {
  if(e.type == "mouseenter") $(this).addClass("hovering");
  else                       $(this).removeClass("hovering");
}).click(function(e) {
    if(!$(this).hasClass("hovering") return false;
});

フィドルは、フォーム要素と動的に追加されたコンテンツで私が経験したより複雑な状況を説明しています。この要素固有のソリューションとは対照的に、一般的なソリューションを提供します。

于 2013-03-13T17:38:27.290 に答える
0

実際のデバイスでテストしたところ、実際にボタンのアクションが実行されました。赤いボックスを画像にして、Javascript を使用して onclick で画像をボタンに変更することもできます。時間が足りなければ、いくつかのコードを提供したでしょう。

于 2013-03-11T18:32:36.040 に答える
0

純粋な CSS ではできません。ボタンをタップすると、ボタンがホバー状態になり、クリック イベントが発生します。代わりに、アクティブ時にボタンをオフにする必要があります。

于 2013-03-11T18:33:45.497 に答える