vmouse事件WP7的麻煩JQueryMobile

我試圖放在一起使用JQueryMobile水平內容滑塊。vmouse事件WP7的麻煩JQueryMobile

下面的代碼在Android，IOS，Chrome和IE9中很好地工作，用戶可以觸摸（或拖拽）並向左或向右拖動內容。

在WP7（芒果）上發生的所有事情都是原始觸摸似乎突出顯示包含DIV的項目，但任何移動都會被忽略。

<!DOCTYPE html> 
<html class="ui-mobile"> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <title>Scroll View Test</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body class="ui-mobile-viewport"> 
    <div data-role="page"> 
     <div data-role="header"> 
      <h1>Content Slider</h1> 
     </div> 
      <div data-role="content"> 
      <div style="height:50px;width: 110px; overflow: hidden"> 
       <div id="divScroll" style="width: 500px; margin-left:0px;left: 0px; top: 0px;"> 
        <div class="sliderItem" style="background-color:#A03030;float: left; width: 50px;height:50px;">Item 1</div> 
        <div class="sliderItem" style="background-color:#B03030;float: left; width: 50px;height:50px;">Item 2</div> 
        <div class="sliderItem" style="background-color:#D03030;float: left; width: 50px;height:50px;">Item 3</div> 
        <div class="sliderItem" style="background-color:#E03030;float: left; width: 50px;height:50px;">Item 4</div> 
        <div class="sliderItem" style="background-color:#F03030;float: left; width: 50px;height:50px;">Item 5</div> 
       </div> 
      </div> 

      <div id="dbg"></div> 
      <div id="dbg2"></div> 

      <script type="text/javascript" language="javascript"> 
       var mouseIsDown = false; 
       var mouseDownX = 0; 
       var mouseDownMargin = 0; 

       $(document).bind('vmouseup', function (event) { 
       if (mouseIsDown) { 
        event.preventDefault(); 
        $('#dbg').html(event.type); 
        mouseIsDown = false; 
       }}); 

       $('.sliderItem').bind('vmousedown', function (event) { 
        event.preventDefault(); 
       }); 

       $('#divScroll').bind('vmousedown vmousemove', function (event) { 
        event.preventDefault(); 
        $('#dbg').html(event.type); 
        if (event.type == 'vmousedown') { 

         mouseIsDown = true; 


         var ml = $('#divScroll').css('margin-left').replace('px', ''); 
         $('#dbg2').html(ml); 
         mouseDownMargin = parseInt(ml); 
         mouseDownX = event.pageX; 

        } 

        if (event.type == 'vmousemove' && mouseIsDown) { 
         var delta = mouseDownX - event.pageX; 
         $('#dbg2').html(mouseDownMargin - delta); 


         $('#divScroll').css({ marginLeft: mouseDownMargin - delta }); 

        } 
       }); 
      </script> 
     </div> 
    </div> 
</body> 
</html>

我能做些什麼讓這對WP7工作？

在此先感謝您的建議。

來源

2012-01-19 Andy Baker

這不適用於WP7，因爲WP7使用的IE9版本不支持以非常好的方式進行鼠標下移/移動/擡起事件。發生什麼事是，當你第一次把你的手指放在屏幕上時，不會發生任何事件。當你擡起你的手指mousedown/click/mouseup事件時，立即按順序觸發。這使得不可能實現任何允許用戶操縱/拖動DOM元素的功能。

解決此問題的唯一方法是編寫一些模擬鼠標或觸摸事件的本機代碼。我已經取得了一些成功，這個......看到下面的博客文章：

http://www.scottlogic.co.uk/blog/colin/2012/01/fastclick-for-wp7-improving-browser-responsiveness-for-phonegap-apps/

但是，這不會給你鼠標移動事件。我知道Nitobi（PhoneGap的）開發者正在尋找使用這種技術來模擬觸摸事件：

https://issues.apache.org/jira/browse/CB-112

但是，我不知道這是否是真的有可能。

來源

2012-01-19 06:21:27 ColinE

謝謝你花時間回答。我隨後發現這個[鏈接]（http://www.zackgrossbart.com/hackito/touchslider/），這是我想要的大多數方式，它甚至可以在WP7上工作，但我測試的Android設備上的性能是可怕。 – 2012-01-19 08:26:57

啊..如果你只是想水平滾動，WP7 IE9支持溢出：滾動CSS屬性。這是iOS/Android的WebKit不支持的內容。 – ColinE 2012-01-19 08:32:49

vmouse事件WP7的麻煩JQueryMobile

回答

相關問題