デスクトップChrome/FirefoxとAndroid 2.3.6ブラウザ間のJQueryイベント処理の相違点

jQueryとオーディオタグを使用していますが、デスクトップブラウザとAndroid 2.3.6ブラウザの間に不一致があります。デスクトップChrome/FirefoxとAndroid 2.3.6ブラウザ間のJQueryイベント処理の相違点

以下のボードは、play（）およびpause（）メソッド呼び出しに関連する「再生」および「一時停止」ボタンの「クリック」イベントを伴う2つのjQueryモバイルボタンを介してカスタマイズされたオーディオコントロールを実装しています。オーディオ要素。

私はAndroidのブラウザでそれを読み込む場合は、以下のコードはありません、クロムまたはFirefox上で動作しますが、一方で、以下のコードでは、デスクトップのChromeとFirefoxのと同様にアンドロイド2.3.6ブラウザ

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> 
    <script> 
     $(document).ready(function() { 
     $('#play-button').click(function() { 
      document.getElementById('audio').play(); 
     }); 
     $('#pause-button').click(function() { 
      document.getElementById('audio').pause(); 
     }); 
     }); 
    </script> 
    </head> 
    <body> 
    <div data-role="page">  
     <div data-role="header"> 
    <h1>Audio player</h1> 
     </div><!-- /header --> 
     <div data-role="content"> 
    <audio id="audio"> 
     <source src="http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3" type="audio/mpeg" /> 
     <source src="http://www.html5rocks.com/en/tutorials/audio/quick/test.ogg" type="audio/ogg" /> 
     <p>Sorry, your browser does not support playing audio.</p> 
    </audio> 
    <p> 
     <div data-role="controlgroup" data-type="horizontal" style="text-align:center"> 
     <a data-role="button" 
      id="play-button">Play</a> 
     <a data-role="button" 
      id="pause-button">Pause</a> 
     </div> 
    </p> 
     </div><!-- /content --> 

    </div><!-- /page --> 

    </body> 
</html>

の両方のために働きます「再生」ボタンをクリックすると音声が再生されます

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> 
    <script> 
     $(document).ready(function() { 
     $('#player').click(function() { 
      if (document.getElementById('slider').value == 'play') 
      document.getElementById('audio').pause(); 
      else 
      document.getElementById('audio').play(); 
     }); 
     }); 
    </script> 
    </head> 
    <body> 
    <!-- 
    Thanks to 
    http://www.html5rocks.com/en/tutorials/audio/quick/ 
     --> 
    <div data-role="page">  
     <div data-role="header"> 
<h1>Audio player</h1> 
     </div><!-- /header --> 

     <div data-role="content"> 
    <audio id="audio"> 
     <source src="http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3" type="audio/mpeg" /> 
     <source src="http://www.html5rocks.com/en/tutorials/audio/quick/test.ogg" type="audio/ogg" /> 
     <p>Sorry, your browser does not support playing audio.</p> 
    </audio> 
    <p> 
     <div data-role="fieldcontain" 
      style="text-align:center" 
      id="player"> 
     <select name="slider" 
      id="slider" 
      data-role="slider" > 
      <option value="play">Play</option> 
      <option value="pause">Pause</option> 
     </select> 
     </div> 
    </p> 
    </div><!-- /content --> 

    </div><!-- /page --> 

    </body> 
</html>

なぜこのようなケースが考えられますか？イベントがモバイルブラウザで処理される方法に違いはありますか？

出典

2012-03-11 Marcus P S

あなたはJQMのリリース候補版を使用しているとして、それはあなたがバグを見つけたことが可能です。..

Clickイベントは、Androidで標準的に働く...それはあなたの問題はあなたがスライダーのイベントを処理している方法については可能です。問題を特定し、イベントが機能することを証明するために、この非常に基本的な例は機能しますか？

<script> 
    $(document).ready(function() { 
    var player = document.getElementById('audio'); 

    $('#play').click(function() { 
     player.play(); 
    }); 

    $('#pause').click(function() { 
     player.pause(); 
    }); 

    }); 
</script>

マークアップの変更：

<div data-role="fieldcontain" 
    style="text-align:center" 
    id="player"> 
    <a href="#" id="play">Play</a> 
    <a href="#" id="pause">Pause</a> 
</div>

出典

2012-03-12 09:46:22 Lloyd

は、この単純化は、Androidのブラウザ（v2.3.6およびV3.2.1）にも、デスクトップ上では動作しませんので、行動は間違いなく異なっています。 –

デスクトップやAndroidで動作しない場合（動作しない場合）は同じですか？ – Lloyd

私は自分のコードの動作が提案したコードの動作と異なることを意味しました。私のコードは少なくともデスクトップで動作しますが、私のテストではあなたの提案はどちらでも動作しません。 –

デスクトップChrome/FirefoxとAndroid 2.3.6ブラウザ間のJQueryイベント処理の相違点

答えて

関連する問題