windows-phone-7 – vmouse事件的问题WP7 JQueryMobile
发布时间:2020-12-14 05:35:57 所属栏目:Windows 来源:网络整理
导读:我正在尝试使用 JQueryMobile组合一个水平内容滑块. 以下代码适用于Android,IOS,Chrome和IE9,用户可以触摸(或mousedown)并向左或向右拖动内容. 在WP7(Mango)上发生的一切都是原始触摸似乎突出显示包含DIV的项目,但忽略任何移动. Content Slider Sample !DOCT
我正在尝试使用
JQueryMobile组合一个水平内容滑块.
以下代码适用于Android,IOS,Chrome和IE9,用户可以触摸(或mousedown)并向左或向右拖动内容. 在WP7(Mango)上发生的一切都是原始触摸似乎突出显示包含DIV的项目,但忽略任何移动. Content Slider Sample <!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上运行? 在此先感谢您的建议. 解决方法
这不适用于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/ 但是,这不会给你mousemove事件.我知道Nitobi(PhoneGap)开发人员正在寻求使用这种技术来模拟触摸事件: https://issues.apache.org/jira/browse/CB-112 但是,我不确定这是否真的可行. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- windows-vista – 我能否“突袭”我的raid 1设置
- azkaban的简单使用
- windows-server-2008 – 为所有用户授予某个程序的管理员权
- windows-phone – WP8上的IE 10忽略了媒体查询?
- windows-server-2008 – Windows Web Server 2008 R2 Max R
- wpf – 使用Windows Workflow Foundation(WF)作为表示规则引
- windows-services – 在Windows服务中调用时ssh失败
- windows-phone-8 – Windows Phone 8页面生命周期
- window下redis的安装和创建redis启动服务
- reporting-services – ColdFusion报告选项
推荐文章
站长推荐
- 在后台Windows Phone中的服务
- Microsoft Media Foundation官方文档翻译(8)《
- windows-service – 在LocalService帐户下运行的
- 如何从Windows上的Perl CGI脚本分叉后台进程?
- WPF应用中对WindowsFormHost内容进行裁剪
- 如何用win32 API转换时区?
- Windows工作流(WF):将一个活动的输出作为序列中
- 老机器XP Outlook Express 发大附件对方客户端收
- windows-server-2008 – 如果对的大小相同,在rai
- ms-access – Microsoft Access中的Scope_Identi
热点阅读