Question

我的移动页面上有一个滑动功能，我想使用touchstart，touchend和touchmove来跟踪设备上的滑动功能，而不会影响滚动。

这是我的代码。

jQuery('.first-frame').bind('touchmove', function(event) {
 _gaq.push(['_trackEvent', 'Landing-Page', 'Swipe-Toggle-Color', '0259_2190']);
});

Answer 1

如果只能监控jQuery Mobile中的swipeleft和swiperight事件，请执行此操作。

否则，您可以在scroll事件上设置一个全局变量，该事件在重复0.2秒之后重置。然后让touchmove事件检查是否设置了该变量，如果设置了该变量，则不要触发Google Analytics。

window.is_scrolling = false; // global variable
window.timeout_id = 0;

window.onscroll = function() {
    window.is_scrolling = true;
    clearTimeout(window.timeout_id);
    window.timeout_id = setTimeout(function() { 
        window.is_scrolling = false; 
    }, 200); // milliseconds
};

jQuery('.first-frame').bind('touchmove', function(event) {
    if (!window.is_scrolling) 
       _gaq.push(['_trackEvent', 'Landing-Page', 'Swipe-Toggle-Color', '0259_2190']);
});

Answer 2

我知道您要求使用touchmove，touchend和touchstart示例，但我会使用HammerJS（https://github.com/EightMedia/hammer.js/）和自定义Google事件的组合来猜测它。

var element = $(".first-frame")[0];

var trackswipe = Hammer(element, {
  drag: false,
  transform: false,
  swipe: true,
  swipeVelocityX: 0 // Adjust to liking...
}).on("swipe", function(event) {
  if (event.gesture.direction === "left") {
    // Track Something
    return false;
  } else if (event.gesture.direction === "right") {
    // Track something else.
    return false;
  }
  return false;
});

使用Google Analytics跟踪滑动

2 个答案: