Question

我有一个网站，我希望也可以在手机上玩。

在界面中我主要使用javascript。如何检测用户手指在屏幕上的移动，以便调用正确的javascript函数？

例如，在我的照相馆中 <input type="button" onClick="imagenext();"/>调用imagenext，以便图库呈现下一张图片。

对于手机，我该怎么办呢 onFingerMoved="imagenext();"

或者甚至更好，如何将移动事件添加到我现有的代码中？喜欢 onClick or onMove= function();

当然，我正在寻找跨移动浏览器解决方案

原谅我幼稚的例子，我是一个乞丐

提前致谢

Answer 1

您可以使用jQuery Mobile来完成此任务。这是刷卡事件的api documentation。您可以按如下方式实现您要执行的操作：

$( "body" ).on( "swipe", function() {
    imageNext();
);

Answer 2

你有ontouchstart，ontouchend，ontouchmove，可以把它放在你喜欢的任何东西上。

var _touches = {
    'touchstart'    : {'x' : -1, 'y' : -1}
  , 'touchmove'     : {'x' : -1, 'y' : -1} 
  , 'touchend'      : false
  , 'direction'     : 'undetermined'
};

function touchHandler (event) {
  var touch
    , xSwipe
    , ySwipe;

  if (typeof event !== 'undefined'){    
    // for vanilla javascript use event.touches
    if (typeof event.originalEvent.touches !== 'undefined') {
        touch = event.originalEvent.touches[0];

        switch (event.originalEvent.type) {
            case 'touchstart':
            case 'mousedown':
                _touches[event.originalEvent.type].x = touch.pageX;
                _touches[event.originalEvent.type].y = touch.pageY;
                break;
            case 'touchmove':
            case 'mousemove':
                _touches[event.originalEvent.type].x = touch.pageX;
                _touches[event.originalEvent.type].y = touch.pageY;
                break;
            case 'touchend':
            case 'mouseup':
                    _touches[event.originalEvent.type] = true;
                        if (_touches.touchstart.x > -1 && _touches.touchmove.x > -1) {
                        xSwipe = Math.abs(_touches.touchstart.x - _touches.touchmove.x);
                        ySwipe = Math.abs(_touches.touchstart.y - _touches.touchmove.y);
                        }
                        if (xSwipe > ySwipe && xSwipe > (getViewport().width * .33)) {
                            _touches.direction = _touches.touchstart.x < _touches.touchmove.x ? 'left' : 'right';

                            if (_touches.direction === 'left') {
                                // do something
                            } else if (_touches.direction === 'right') {
                                // do something
                            }
                        }
                }
                break;
            }
        }
    }
}

$element.on('touchstart touchmove touchend', function (e) {
    touchHandler(e);
});

检测移动电话上的移动以调用javascript函数

2 个答案: