Question

所以我需要类似下面的内容，它基本上是一个2-dir触摸板，用户用手指触摸（并保持触摸）以某种方式移动角色。这在我的电脑上工作正常，但是当我在iOS上测试时，它似乎不起作用。原因可能是因为没有鼠标，所以 mousedown 和 mouseup 不起作用。还有其他选择吗？我曾尝试使用 keydown 和 keyup ，但这些都没有用。

这是我的代码：

var $div = $('#character');

$('#ios-left').mousedown(function(){
   leftTimer = setInterval(function(){
    processWalk('left');
    },100);
}).mouseup(function(){
    $('#character').stop();
    clearInterval(leftTimer);
});
$('#ios-right').mousedown(function(){
        rightTimer = setInterval(function(){
     processWalk('right');
             },100);
}).mouseup(function(){
    $('#character').stop();
    clearInterval(rightTimer);
});

谢谢！（请记住，我需要用户用手指按住div来让角色移动，当他释放手指时，角色应该停止）

编辑：链接到我的问题：JQuery Mouseup on iOS

Answer 1

使用非常轻量级的 jquery.mouse2touch.min.js 插件来模拟触摸事件的鼠标事件。

应用鼠标事件处理程序行为来触摸下面$("#elmentID").mouse2touch()或$(".elment-css-class").mouse2touch()之类的事件，这些事件可以复制所有基于鼠标的功能以进行触摸。

在您的代码中，您可以拨打mouse2touch()，如下所示：

$('#ios-left').mousedown(function(){
   leftTimer = setInterval(function(){
    processWalk('left');
    },100);
}).mouseup(function(){
    $('#character').stop();
    clearInterval(leftTimer);
}).mouse2touch();

$('#ios-right').mousedown(function(){
        rightTimer = setInterval(function(){
     processWalk('right');
             },100);
}).mouseup(function(){
    $('#character').stop();
    clearInterval(rightTimer);
}).mouse2touch();

编辑：对于另一个链接Question，我在这里提供相同的答案。

<强> Working Fiddle

计时器的问题，你应该在移动前清除时间间隔。具有TimerWalk的全局变量clearInterval(TimerWalk);应该很有用。

以下是代码块

$('#ios-left').mousedown(function () {
    clearInterval(TimerWalk);
    TimerWalk = setInterval(function () {
        processWalk('left');
    }, 100);
}).mouseup(function () {
    $div.stop();
    clearInterval(TimerWalk);
}).mouse2touch();

$('#ios-right').mousedown(function () {
    clearInterval(TimerWalk);
    TimerWalk = setInterval(function () {
        processWalk('right');
    }, 100);
}).mouseup(function () {
    $div.stop();
    clearInterval(TimerWalk);
}).mouse2touch();

这仅适用于正常移动，您可能需要解决其他问题。

Mouseup和mousedown没有在ios上工作

1 个答案: