Question

好的，我正在为iPad创建一个画廊网站。它需要能够滑动，当您单击缩略图时，它会使用AJAX加载图库图像。

html看起来像这样：

<section id="col1">
  <nav>
    <div class="appGallery">
      <div class="imageHandler"></div>
      <ul>
        <li><a href="1.html"><img src="1.jpg" alt="" /></a></li>
        <li><a href="2.html"><img src="2.jpg" alt="" /></a></li>
        <li><a href="3.html"><img src="3.jpg" alt="" /></a></li>
        <li><a href="4.html"><img src="4.jpg" alt="" /></a></li>
      </ul>
    </div>
  </nav>
</section>

我正在使用滑动插件，而imageHandler基本上就是跟踪移动（触摸/鼠标事件）。它有一个更高的z-index来覆盖无序列表，所以这基本上意味着'a'链接不起作用。

我编写了一个全新的算法来检测基于height和event.pageY在$（'＃col1 nav'）上点击哪些缩略图。我的算法在桌面上完美运行，但不适用于iPad。点击事件不会注册。

这是JavaScript的样子：

var dragging = false;

imageHandler.bind('touchmove', function(event) {
  dragging = true;
});

imageHandler.bind('touchend', function(event) {
  var touch = event.originalEvent.touches[0]  ||  event.originalEvent.changedTouches[0];

  if (dragging) {        
    //swipe column
    dragging = false;
  }
  else {
    //I've done some testing myself by including an alert() here, it pops out.
    $('#col1 nav').click(function(event) {
      //but when I insert and alert() here, nothing happens
      var touch = event.originalEvent.touches[0]  ||  event.originalEvent.changedTouches[0];

      //my algorithm to select the thumbnails using touch.pageY
      //ajax using .load
    });
    dragging = false;
  }
  return false;
});

任何人都知道出了什么问题？

Answer 1

看起来你在“touchend”事件中绑定了它。因此，只有在您停止拖动后才会注册。

您是否尝试使用直播活动将其绑定到函数外部？像这样：

$('#col1 nav').live("click", function(event) {

点击事件不会在iPad中注册

1 个答案: