js mousedown 与触摸

Question

有没有办法检测“mousedown”是触摸式右键单击（将手指保持在原位约 1 秒）还是只是正常的右键单击？

我认为 chrome 可以使用“ev.originalEvent.sourceCapabilities.firesTouchEvents”来做到这一点。但只有铬。

$('#container').mousedown(function(ev) {
    if (ev.button === 2 && ev.comesFromTouch) return false
    //...
}

编辑： 当前情况：在我按下鼠标左键大约一秒钟后，浏览器会自动触发 button = 2 的“mousedown”事件（在 chrome 的“设备工具栏”模式下测试）。我想取消这个。

解决方案 如果在 touchstart 和 touchend 之间出现鼠标右键，则它是在触摸屏上单击鼠标右键。

它的工作原理是这样的。

function onPcRight() { console.log(1);}
function onTouchRight() { console.log(2);}

$('#container').mousedown(function(ev) {
    if (ev.button === BUTTON_RIGHT) {
        if ($(this).prop('touchdown')) onTouchRight();
        else onPcRight();
    }
})
.on('touchstart', function() {
    $(this).prop('touchdown', true);
})
.on('touchend', function() {
    $(this).prop('touchdown', false);
});

Answer 1

我认为您可以使用 setTimeout/clearTimeout 来计算 1。伪代码：

var global_timer = null;
$('#container').mousedown(function(ev) {
  if (ev.button === 2) {
    global_timer = setTimeout(fireTouchRightClick, 1000);
  }
});
$('#container').mousemove(function(ev) {
  cancelTouchRightClick();
});
$('#container').mouseleave(function(ev) {
  cancelTouchRightClick();
});
$('#container').mouseup(function(ev) {
  if (cancelTouchRightClick() && ev.button === 2) {
    fireNormalRightClick();
  }
});
function cancelTouchRightClick () {
  if (global_timer) {
    clearTimeout(global_timer);
    global_timer = null;
    return true;
  }
  return false;
}
function fireTouchRightClick () {
  global_timer = null;
  // TODO touch right click
}

我还在 Github 上找到了一个做鼠标控制的仓库：https://github.com/dna2github/dna2petal/tree/master/visualization https://github.com/dna2github/dna2petal/blob/master/samples/visualization.html

也许您需要将按钮类型传递给鼠标按住事件回调