Touch Events in Windows Phone 7 Mango IE
Will the IE in WP7 Mango support Touch events like iOS or Android? The touch events seems will become a standard in W3C: http://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html. IE 9 said it foll开发者_Python百科ow the standards, does anyone know whether it will support touch events? Thanks.
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.net/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.com/jquery-1.4.4.min.js' jquery.mobile, carousel></script>
<script type="text/javascript" src="http://ajax.googleapis.com/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.com/blackdynamo/jQuery-Mobile-Carousel/raw/master/jquery.ui.ipad.js"></script>
<script type='text/javascript' src="https://github.com/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>
加载中,请稍侯......
精彩评论