Phonegap-(安卓/iphone）多个图像的图像库出现问题

Phonegap-(Android/iphone) Image gallery with multiple images is giving problems?

本文关键字：图像 问题 安卓 iphone Phonegap-      更新时间：2023-09-26

我使用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的图库新闻应用程序。

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

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

我想这也是你点击进入指定页面时遇到麻烦的原因。

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

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

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

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

e.preventDefault()

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

event.prventDefault（）与return false什么是事件冒泡和捕获？

无法上下滑动的原因可能是"滑动"事件占用了"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手机的经验，但我认为问题是相似的。

相关文章：