本文介绍了如何在pjax库上启用触摸事件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在开发一个使用库(jquery pjax的端口)的站点。但是,触摸事件不会进行。我正在像这样使用Pjax:

I am developing a site where I use Pjax library (a port of jquery pjax). However the touch events don't go through. I am using Pjax like so:

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)
})

我需要它才能在移动设备上工作。该网站为(可能有问题)

I need it to work on mobile. The site is www.saulesinterjerai.lt (can be buggy)

推荐答案

我找到了解决方案,它的工作原理是将触摸事件重定向到单击事件,如下所示:

I found the solution, it works by redirecting touch event to click event like this:

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
}

这篇关于如何在pjax库上启用触摸事件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-14 22:13