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

Question

I have some function tied to keyboard arrow keys events in desktop website using 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;
}

}

These are working fine on desktop website, but not on mobile website.
(I know we can't access arrow keys in mobile)

I want those corresponding functions to be executed in mobile website.
(if user swipes to left/up/right/down on mobile website)

can anyone help me in this?

Answer 1

I don't think you can do this, especially with swipes as swipes are a combination of different events (ie keydown, keyhold, keyup) .

Picking up swipes via keyup and keydown events can be very difficult. It would be better to use a plugin which can explicitly detect swipes such as Hammer.js

Answer 2

jquery mobile has events for swipeleft and swiperight

For up and down yo have to use the scrollstart and scrollstop events to detect in which direction the scroll is going.

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