android 与 iphone 上的 jquery 移动事件答案

【问题标题】：jquery mobile events on android vs. iphoneandroid 与 iphone 上的 jquery 移动事件
【发布时间】：2012-03-31 17:40:00
【问题描述】：

我是 jquery mobile 的新手。我的问题是我需要在 div 上捕获 vmousemove 事件，因为我需要在这个 div 中拖动图像，就像谷歌地图上的 svg 图像一样。

我在http://demo.baral.de/test/得到了一个演示

我有 3 台设备：iphone iOS5、Samsung tab 上的 Android 3.2 和 HTC 渴望上的 Android 2.2.2。当我“悬停”在绿色 div 上时，我认为当我的手指触摸显示屏上的某个动作时会有很多“vmousemove”。

iphone 触发：

vmouseover
vmousedown
vmousecancel
很多 vmousemove
vmouseup

这对我来说似乎很完美

Android 3.2 触发：

vmouseover
vmousedown
vmousecancel
vmousemove

Android 2.2.2 触发：

vmouseover
vmousedown
vmousecancel
vmousemove（1 次）

在我完成移动并且我的手指离开显示屏后，它会触发

很多 vmousemove
vmouseup

这对于 jquery mobile 来说是“正常的”吗？一个错误还是只是错误的代码？

谢谢！

代码：

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head> 
<body> 
    <div data-role="page" data-position="fixed" id="wrapper">
        <div id="test" style="width: 200px; height: 200px; background-color: green"></div>
        <div id="footer" style="border: 1px solid black; width: 200px;">    
            <ul></ul>
        </div>
    </div>
    <script type="text/javascript">
        $("#wrapper").live('pageinit', function() {
            $("#test").bind('vmouseover vmousedown vmousemove vmouseup vclick vmousecancel', function (event) {
                $('#footer ul').append("<li>"+event.type+"</li>");
            });
        });
    </script>
</body>

【问题讨论】：

标签： jquery android ios jquery-mobile

【解决方案1】：

这不是 jquery-mobile 的错误，当您想在鼠标移动时实现某些目标时，您无论如何都可以这样做，因为它会被触发一次。这可能是设计使然。

【讨论】：

【解决方案2】：

我有类似的问题，并在回调函数的开头添加“event.preventDefault()”解决了它。详情请见here。

例子：

$("#test").bind('vmouseover vmousedown vmousemove vmouseup vclick vmousecancel', function (event) {
     event.preventDefault();
     $('#footer ul').append("<li>"+event.type+"</li>");
});

【讨论】：