點擊事件不會在iPad中注冊

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”鏈接將無法正常工作。

我已經編寫了一種全新的算法來根據高度和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) {