桌面Chrome/Firefox和Android 2.3.6浏览器之间的JQuery事件处理差异

我在玩jQuery和音频标签，但遇到了桌面浏览器和Android 2.3.6浏览器之间的一些不一致之处。桌面Chrome/Firefox和Android 2.3.6浏览器之间的JQuery事件处理差异

下面的bode通过两个jQuery移动按钮实现了定制的音频控制，在“播放”和“暂停”按钮上的“播放”和“暂停”按钮上的“点击”事件音频元素。

下面的代码同时适用于桌面版Chrome和Firefox，以及在Android 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>

，而下面的代码适用于Chrome或Firefox，但如果我加载它的Android浏览器，无音频播放时，我点击“播放”按钮

<!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候选版本，有可能你已经发现了一个bug ..

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），这样的行为肯定是不同的。 – 2012-03-25 03:26:18

如果它不能在桌面或Android上运行（它失败）的行为是一样的，不是吗？ – Lloyd 2012-03-25 09:27:34

我的意思是我的代码行为与您所建议代码的行为不同。我的代码至少适用于桌面，从我的测试中，你的建议也不适用。 – 2012-04-01 20:50:08

桌面Chrome/Firefox和Android 2.3.6浏览器之间的JQuery事件处理差异

回答

相关问题