Phonegap-(Android/iphone) 多张图片的图库有问题吗？答案

【问题标题】：Phonegap-(Android/iphone) Image gallery with multiple images is giving problems?Phonegap-(Android/iphone) 多张图片的图库有问题吗？
【发布时间】：2012-09-08 07:57:53
【问题描述】：

我使用 jQuery mobile 制作了 HTML5、JavaScript 和 CSS 的图片库。 IE Phonegap 平台没问题。
图像是动态来的并加载到其中，如下所示：
http://torontographic.com/wordpress/mouseSwipe/mouseSwipe.html

鼠标上方滑动滑块：

TYPE: 'mouseSwipe'
HORIZ: true
plugin available at
torontographic.wordpress.com

随之而来的问题是我无法单击图像并转到下一页，因为两个事件同时发生。

第二个问题是我无法从放置画廊的地方向上向下滑动页面，除了没有画廊的其他区域。

为了更清楚，我正在制作新闻应用程序，其中我添加了 5 - 10 个画廊，例如 Pulse 新闻应用程序。

【问题讨论】：

嗨！你能提供一些代码吗？
“两个事件同时发生”是什么意思？您是否遭受两次触发的“点击”事件？

标签： javascript html css cordova jquery-mobile

【解决方案1】：

我对这个问题的一些细节有点困惑，但我不想看到这个问题完全没有答案，以防其他人遇到这个问题。

此插件 (mouseSwipe) 覆盖了移动设备的默认拖动功能。虽然通常设备会在鼠标启动事件时滚动页面，但此插件会覆盖该行为以检测跨元素的点击移动。由于它中断了该功能，因此拖动相反方向（用于滚动）也被破坏。如果该插件仍由所有者维护（它似乎不是），则可以对其进行更新以解决此问题，或发出可用于手动创建所需功能的事件。

我认为这也是让您无法点击转到指定页面的原因。

如果你想听听我的真实意见，我会选择一个不同的库，也许一个只关注移动设备的可滑动性，然后单独处理桌面功能（不过，如果你使用的是 PhoneGap，很可能你不是'甚至将其发布到桌面的网络平台）。如果它要在网络上，你可以使用modernizr（或类似的）来确定设备是否支持触摸输入，然后实现如下：

http://labs.rampinteractive.co.uk/touchSwipe/demos/Image_gallery_example.html

对于不支持触摸的设备，您可以退回到基于按钮/箭头的导航（毕竟，作为桌面用户，我不希望能够用鼠标来回拖动它）。

【讨论】：

【解决方案2】：

在文件http://torontographic.com/wordpress/mouseSwipe/jquery.mouseSwipe.js onmousedown 函数中有如下代码。这将从默认行为停止事件，并在情况下停止捕获/冒泡。您可能想查看这些或库处理事件的方式。

e.preventDefault()

这里是关于如何停止 JQuery 传播和常规行为的更多信息。

event.preventDefault() vs. return false What is event bubbling and capturing?

【讨论】：

【解决方案3】：

您无法上下滑动的原因可能是“滑动”事件占用了“movestart”或“move”事件。

我在使用这个插件时遇到过类似的问题： http://stephband.info/jquery.event.swipe/

他们在他们的网站上指出的解决方案是在事件上调用 preventDefault 方法以防止它被阻塞，如此处所示。

jQuery('.mydiv')
.on('movestart', function(e) {
  // If the movestart is heading off in an upwards or downwards
  // direction, prevent it so that the browser scrolls normally.
  if ((e.distX > e.distY && e.distX < -e.distY) ||
      (e.distX < e.distY && e.distX > -e.distY)) {
    e.preventDefault();
  }
});

我没有使用 jQuery mobile 的经验，但我认为问题是相似的。

【讨论】：