最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Touch Events in Windows Phone 7 Mango IE - Stack Overflow

programmeradmin4浏览0评论

Will the IE in WP7 Mango support Touch events like iOS or Android? The touch events seems will bee a standard in W3C: .html. IE 9 said it follow the standards, does anyone know whether it will support touch events? Thanks.

Will the IE in WP7 Mango support Touch events like iOS or Android? The touch events seems will bee a standard in W3C: http://dvcs.w3/hg/webevents/raw-file/tip/touchevents.html. IE 9 said it follow the standards, does anyone know whether it will support touch events? Thanks.

Share Improve this question asked Aug 22, 2011 at 3:56 KinleongKinleong 3714 silver badges14 bronze badges 0
Add a ment  | 

3 Answers 3

Reset to default 5

It currently supports no touch events. All you need do to prove it is something simple like this:

document.ontouchstart = function() { alert("TS"); }
document.ontouchmove = function() { alert("TM"); }
document.ontouchend = function() { alert("TE"); }

None of these will fire in IE9 mobile.

It doesn't currently support touch events.

This is partially not true. I develop on Windows Phone 7. And I have achieved a touch effect.

http://jsfiddle/blackdynamo/yxhzU/

Here, this works on HTC HD7 - mobile version and desktop version selected. You can see the code below:

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>jQuery Mobile Carousel Demo - jsFiddle demo by blackdynamo</title>
  <script type='text/javascript' src='http://code.jquery./jquery-1.4.4.min.js' jquery.mobile, carousel></script>
  <script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <script type='text/javascript' src="https://github./blackdynamo/jQuery-Mobile-Carousel/raw/master/jquery.ui.ipad.js"></script>
  <script type='text/javascript' src="https://github./blackdynamo/jQuery-Mobile-Carousel/raw/master/jquery.mobile.carousel.js"></script>
  <style type='text/css'></style>
  <script type='text/javascript'>
  //<![CDATA[ 
  $(window).load(function(){
      (function($) {
        $("#carousel1").carousel();
        $("#carousel2").carousel({direction: "vertical"});
    })(jQuery);
  });
  //]]> 
  </script>
  </head>
  <body>
Horizontal
<div style="height: 300px; width: 500px">
    <ul id="carousel1" style="display: none;">
    <li>
        <div style="width: 100%; height: 100%; background-color:#381;">Page 1</div>
      </li>
    <li>
        <div style="width: 100%; height: 100%; background-color:#837;">Page 2</div>
      </li>
    <li>
        <div style="width: 100%; height: 100%; background-color:#999;">Page 3</div>
      </li>
    <li>
        <div style="width: 100%; height: 100%; background-color:#738;">Page 4</div>
      </li>
    <li>
        <div style="width: 100%; height: 100%; background-color:#142;">Page 5</div>
      </li>
    <li>
        <div style="width: 100%; height: 100%; background-color:#927;">Page 6</div>
      </li>
    <li>
        <div style="width: 100%; height: 100%; background-color:#987;">Page 7</div>
      </li>
    <li>
        <div style="width: 100%; height: 100%; background-color:#187;">Page 8</div>
      </li>
  </ul>
  </div>
Vertical
<div style="height: 300px; width: 500px">
    <ul id="carousel2" style="display: none;">
    <li>
        <div style="width: 100%; height: 100%; background-color:#381;">Page 1</div>
      </li>
    <li>
        <div style="width: 100%; height: 100%; background-color:#837;">Page 2</div>
      </li>
    <li>
        <div style="width: 100%; height: 100%; background-color:#999;">Page 3</div>
      </li>
    <li>
        <div style="width: 100%; height: 100%; background-color:#738;">Page 4</div>
      </li>
    <li>
        <div style="width: 100%; height: 100%; background-color:#142;">Page 5</div>
      </li>
    <li>
        <div style="width: 100%; height: 100%; background-color:#927;">Page 6</div>
      </li>
    <li>
        <div style="width: 100%; height: 100%; background-color:#987;">Page 7</div>
      </li>
    <li>
        <div style="width: 100%; height: 100%; background-color:#187;">Page 8</div>
      </li>
  </ul>
  </div>
</body>
</html>
发布评论

评论列表(0)

  1. 暂无评论