如何在 pjax 库上启用触摸事件？答案

【问题标题】：How to enable touch events on pjax library?如何在 pjax 库上启用触摸事件？
【发布时间】：2017-06-23 14:09:59
【问题描述】：

我正在开发一个使用Pjax 库（jquery pjax 的端口）的站点。然而，触摸事件没有通过。我像这样使用 Pjax：

var pjax = new Pjax({ selectors: ["head title", "body"] })

还有一些动画：

document.addEventListener('pjax:send', function(){
  var $main = document.querySelector('main')
  $main.style.opacity = 0
})

document.addEventListener('pjax:complete', function(){
  var $main = document.querySelector('main')
  $main.style.visibility = 'hidden'
  $main.style.opacity = 0
  setTimeout(function(){
    document.querySelector('main').style.visibility = 'visible'
    document.querySelector('main').style.opacity = 1
    attach_menu_control()
  }, 10)
})

我需要它在移动设备上工作。该网站是www.saulesinterjerai.lt（可能有问题）

【问题讨论】：

标签： javascript addeventlistener pjax dom-events

【解决方案1】：

我找到了解决方案，它通过将触摸事件重定向到点击事件来工作，如下所示：

if (is_touch_device()) {
  var all_links = document.querySelectorAll('a[href]')
  var event = new Event('click');

  for (var index = 0 ; index < all_links.length ; ++index) {
    all_links[index].addEventListener("touchend", function() {
      all_links[index].dispatchEvent(event)
    });
  }
}

function is_touch_device() {
  return 'ontouchstart' in window        // works on most browsers 
      || navigator.maxTouchPoints;       // works on IE10/11 and Surface
}

【讨论】：