12

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

在 mouseSwipe 滑块上方：

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

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

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

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

4

3 回答 3

0

I'm a little confused about some of the details of the issue, but I hate to see this question go completely unanswered in case someone else has this issue.

This plugin (mouseSwipe) overrides the default dragging functionality for mobile devices. Whereas normally devices would scroll the page on the mouse starting event, this plugin overrides that behavior to detect click movement across an element. Since it interrupts that functionality, dragging the opposite direction (for scrolling) is also broken. If the plugin were still being maintained by the owner (it doesn't appear to be), it could be updated to fix this issue, or emit events that could be used to manually create the functionality you're wanting.

I assume this is also what is giving you trouble for clicking to go to the specified page.

If you want my honest opinion, I would choose a different library, perhaps one that focuses solely on the swipability of mobile devices, and then handle desktop functionality separately (though, if you're using PhoneGap, it's likely you aren't even publishing this to a web platform for desktops). If it's going to be on the web, you can use modernizr (or the like) to figure out if the device supports touch input, and then implement something like the following:

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

For devices that do not support touch, you could fall back to button/arrow-based navigation (after all, as a desktop user, I do not expect to be able to drag it back and forth with the mouse).

于 2013-05-06T16:34:49.107 回答
0

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

e.preventDefault()

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

event.preventDefault() 与 return false 什么是事件冒泡和捕获？

于 2014-03-13T15:27:35.130 回答
0

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

于 2014-10-15T22:24:05.310 回答