windows-phone-7 – vmouse事件的问题WP7 JQueryMobile

2024年2月5日 244次阅读

我正在尝试使用
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

但是,我不确定这是否真的可行.

点赞