13

デスクトップとモバイルの両方に対応するレスポンシブ Web サイトを作成しています。ホバー アンド クリック イベントに関する 1 つの問題があり、モバイル デバイスのユーザーに対して解決方法がわかりません。

サイトには、リンクで囲まれたボックス (div) があります。デスクトップでは、ユーザーがカーソルを合わせると、テキスト コンテンツを含む別の色のボックスが最初のボックスの上にスライドします。ユーザーがボックスをクリックすると、リンクによって指定されたページに移動します。これにはjQueryを使用しています。

現在、モバイル デバイスでは、ユーザーがボックスをタップすると、2 番目のボックスが下にスライドします。ただし、実際にリンクをたどるには 2 回目のタップが必要です。私がこれを作成している会社は、モバイル デバイスで、ユーザーがボックスをタップすると、2 番目のボックスが下にスライドし、2 秒後に指定されたページに自動的に送信されるように要求しました。このように、ユーザーは 1 回タップするだけで済みます。

これを機能させる方法がわかりません。jQuery モバイルを使用することを考えましたが、最初のタップ (モバイル デバイスではホバー イベントのように扱われます) をバイパスし、代わりにリンクを有効にする方法がわかりません。

ありがとう

4

3 に答える 3

16

これが悪い設計であるという事実について、@DZittersteynに同意します。クリックした人が何をクリックしたかがわかるように、デフォルトでモバイルでコンテンツをより適切に表示できます。

if(!!('ontouchstart' in window)){//check for touch device
  $('myElement').unbind('click mouseenter mouseleave'); //use off if you used on, to unbind usual listeners
  $('myElement').on('click',function(){
    //slide down code
    setTimeout(function(){
       window.location.href='asdasd.html';
       },2000);
    });
}

またはあなたが使用することができます

if(!!('ontouchstart' in window)){//check for touch device
//behaviour and events for touch device
}
else{
//behaviour and events for pointing device like mouse
}
于 2012-08-29T21:58:39.833 に答える
2 
if (('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch))) {
    $(".touch")
        .bind("touchstart", function() {
            $(this)
                .addClass("active")
                .bind("touchend", function() {
                    $(this).removeClass("active");
                });
        })
        .bind("touchenter", function() {
            $(this)
                .addClass("hover")
                .bind("touchleave", function() {
                    $(this).removeClass("hover active");
                });
        });
}
于 2013-09-19T09:51:22.017 に答える
1

jQuery を使用して、モバイルのtouchstartおよびtouchendイベントをリッスンしてみてください。

元：

$('selector').bind('touchstart', function(){
  //some action
});
$('selector').bind('touchend', function(){
  //set timeout and action
});

お役に立てれば。

于 2012-08-29T21:48:25.150 に答える