携帯端末でイベントをクリックしてクリックします

Question

私はデスクトップとモバイルの両方に対応するウェブサイトを作成しています。私は、ホバリングとクリックのイベントでモバイルデバイス上のユーザーを解決する方法がわからないという問題が1つあります。

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

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

私はこの作業を行う方法がわかりません。私はjQueryモバイルの使用について考えましたが、最初のタップ（モバイルデバイスがホバーイベントのように扱う）をバイパスしてリンクをアクティブにする方法を理解することはできません。

おかげ

Answer 1

@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 
} 

Answer 2

は、モバイル用touchstartとtouchendイベントに耳を傾けるのjQueryを使用してみてください。

EX：

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

・ホープ、このことができます。

Answer 3

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"); 
       }); 
     }); 
}