web-dev-qa-db-ja.com

モバイルデバイスでのホバーおよびクリックイベント

デスクトップとモバイルの両方でレスポンシブウェブサイトを作成しています。ホバーおよびクリックイベントで、モバイルデバイスのユーザーの解決方法がわからないという問題が1つあります。

このサイトには、リンクで囲まれたボックス（div）があります。デスクトップでは、ユーザーがその上にマウスを置くと、テキストコンテンツのある異なる色のボックスが最初のボックスの上にスライドします。ユーザーがボックスをクリックすると、リンクは指定されたページに移動します。これにはjQueryを使用しています。

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

これをどのように機能させるかわかりません。 jQuery mobileの使用を考えましたが、最初のタップ（モバイルデバイスがホバーイベントのように処理する）をバイパスしてリンクをアクティブにする方法がわかりません。

ありがとう

jqueryipadmobileresponsive-design
12
eCamK

@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
}
12
sabithpocker
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");
                });
        });
}
1
Artem Doink

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

例：

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

お役に立てれば。

0
dotfury