如何使用jquery在移动网站中模拟桌面网站的键盘事件？

Question

我有一些功能与使用 JQuery 的桌面网站中的键盘箭头键事件相关联。

$(document).keydown(function(e) {
switch (e.which) {
    case 37: //left
         doIT("leftside");
         Break;
    case 38: //up
         doIT("upside");
         Break;
    case 39: //right
         doIT("rightside");
         Break;
    case 40: //down
         doIT("downside");
         Break;
}

}

这些在桌面网站上运行良好，但在移动网站上却不行。
（我知道我们无法在移动设备中访问箭头键）

我希望那些相应的功能在移动网站上执行。
（如果用户在移动网站上向左/上/右/下滑动）

谁能帮我解决这个问题？

Answer 1

我认为您无法做到这一点，尤其是在滑动时，因为滑动是不同事件的组合（即 keydown、keyhold、keyup）。

通过 keyup 和 keydown 事件进行滑动可能非常困难。最好使用可以显式检测滑动的插件，例如Hammer.js

Answer 2

jquery mobile 有 swipeleft 和 swiperight 的事件

对于向上和向下，您必须使用 scrollstart 和 scrollstop 事件来检测滚动的方向。

var start = 0;

$(document).on("scrollstart", function() {
  console.log($(window).scrollTop());
  start = $(window).scrollTop();
});

$(document).on("scrollstop", function() {
  console.log($(window).scrollTop());
  var end = $(window).scrollTop();
  if (start - end < 0) {
    console.log("Scrolled down");
    doIT("downside");

  } else {
    console.log("Scrolled up");
    doIT("upside");
  }
});

$(document).on("swipeleft", function() {
  doIT("rightside");
  console.log("right");
});

$(document).on("swipeleft", function() {
  doIT("leftside");
  console.log("right");
});