iPhone/AndroidブラウザがjQuery onclickイベントの代わりにリンクhrefをたどる場合があります。

私はCSSを浮かべたモバイルウェブギャラリーページを持っています。 CSSのfloatプロパティはリンクにdisplay：blockの動作をさせます。 jQueryのタッチスタートイベントがリンクにバインドされています。ユーザーがリンクをクリックすると、そのタッチスタートイベントにバインドされたJavaScriptコードがAjax経由でスライドを1つ進めます。言い換えれば、ページリフレッシュはありません。iPhone/AndroidブラウザがjQuery onclickイベントの代わりにリンクhrefをたどる場合があります。

しかし、リンクテキスト自体ではないリンクのブロックスペースの領域に触れると、ブラウザがhrefをたどり、Javascriptを実行する代わりに（URLが変更されているため）ページが更新されることに気付きましたコードは、タッチスタートイベントにバインドされます。

誰もこれまでに見たことがありますか？これを修正する方法はありますか？

私はこのコードを以下に簡略化しましたが、これはずっと少なくなりました。

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> 
     <title>Test</title> 

     <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> 

     <style type='text/css'> 
      .cont { width: 320px; } 
      .next { border-left: 1px solid #000; float: right; text-align: right; width: 65px; } 
      .msg { clear: both; width: 200px; } 
     </style> 

     <script type='text/javascript'>//<![CDATA[ 
      $(function(){ 
       $('.next').bind('click touchstart', function(event) { 
        event.preventDefault(); 
        if (event.type == 'touchstart') { 
         $(this).unbind('click'); 
        }     
        $('.msg').append('<p>Click!</p>');     
       }); 
      });//]]> 
     </script> 
    </head> 
    <body> 
     <div class="cont"><a href="http://www.yahoo.com" class="next">Next</a></div> 
     <div class="msg"></div> 
    </body>  
</html>

出典

2012-02-22 Stephen

私のiPhoneでこれをテストしたところ、うまくいきました。 touchstartイベントを登録して何らかの理由でクリックイベントをバインド解除しています。それには何らかの理由がありますか？

リンクのテキストをクリックすると、実際に登録されていると思われるのはなので、バインドを解除するとclickは物を壊さない。しかし、テキストリンクの外側をタッチすると、ブロックスペース内にまだtouchstartとclickの両方が登録されているので、この時点ではすでにclickのリンクが解除されており、通常のリンクとして機能していると思います。

境界線の外での最初のクリックでは、yahoo.comには決して行きません。これを行うのは一度だけです。

<script type='text/javascript'>//<![CDATA[ 
     $(function(){ 
      $('.next').bind('click touchstart', function(event) { 
       event.preventDefault();    
       $('.msg').append('<p>Click!</p>');     
      }); 
     });//]]> 
    </script>

あなたがclickのバインドを解除する理由何らかの理由がある：あなたが何をする必要があるか、本質的にそう

はとてもとして、unbindことを削除するのですか？

出典

2012-02-22 01:04:40 mck

デスクトップのブラウザでページをテストしている場合、クリックイベントが正常に動作するようにするため、クリックイベントのバインドを解除します。また、クリックイベントのバインドを解除しないと、関数は2回実行されます.1回はタッチスタート、もう一度はクリックです。私は、モバイルイベントに関するPeter Paul Kochのプレゼンテーションのクリックイベントを解除するという考えを持っています。http://www.slideshare.net/MobileConventionAmsterdam/peter-paul-koch-mobile-convention-amsterdam – Stephen

しかし、デスクトップブラウザでは、アンバインドを実行しません。 'touchstart'イベントがある場合にのみ発生します。また、私がテストをしていたときに、私は2回実行された機能を経験していませんでした。だから私はそれがうまくいくと思う。 'touchstart'がサポートされている場合は、サポートされているイベントを検出し、別のハンドラを登録することもできます。 'touchstart'がサポートされている場合は、最初に' click'を無効にし、 'touchstart'をバインドする（順序は重要です）。そうでない場合は、単に「クリック」のためにバインドします。 – mck

Maciek、リンクをありがとう。申し訳ありませんが、私のコメントは台無しです。あなたが正しいです。私は、モバイルデバイスのクリックイベントをアンバインドして、関数が2回実行されないようにします。しかし、私が提供した例で同じ問題を抱えていないなら、元のコードを調べる必要があります。あなたは、私が考慮しなかったことについて考えさせるものを私に与えました。私はそれについてより多くの情報があるときにここでコメントします。 – Stephen

iPhone/AndroidブラウザがjQuery onclickイベントの代わりにリンクhrefをたどる場合があります。

答えて

関連する問題