检测画布游戏的左右鼠标事件

Question

我想用普通的 javascript 实现一个 canvas 扫雷 游戏。我为我的网格使用二维数组。对于游戏，我需要检测鼠标的左右点击，每个点击都会做不同的事情。我的研究将我引向mousedown，mouseup，contextmenu，但是，我的代码似乎不起作用，因为右键单击它同时执行右键和左键单击的功能，因为触发了 mouseup 事件右键单击也是如此。谁能帮我理解如何区分两者？我遇到了event.which 的示例，其中左键单击是event.which === 0，右键单击是event.which === 2，但据我所知，这仅适用于按钮。 这是代码。

 canvas.addEventListener('mouseup', function(evt) {
    let x1 = Math.floor(evt.offsetX/(canvas.height/rows));
    let y1 = Math.floor(evt.offsetY/(canvas.width/cols));
    draw (y1, x1); //this is my drawing functions (draws the numbers, bombs)

}, false); 

canvas.addEventListener('contextmenu', function(evt) {
    let j = Math.floor(evt.offsetX/(canvas.height/rows));
    let i = Math.floor(evt.offsetY/(canvas.width/cols));

    ctx.drawImage(flagpic, j*widthCell+5, i*widthCell+2, widthCell-9, 
    widthCell-5); //draws the flag where right mouse clicked

}, false);

Answer 1

使用click左键点击事件：

canvas.addEventListener('click', function(evt) { // No right click

并使用contextmenu 进行右键单击：（从键盘上下文菜单中单击右键，也允许您单击鼠标右键）

canvas.addEventListener('contextmenu', function(evt) { // Right click

您还需要致电evt.preventDefault() 以防止默认操作。

---

对于您的上下文，如果您想使用 mousedown 或 mouseup 事件，那么您可以使用 event.button 来检测单击的按钮是否离开：

canvas.addEventListener('mousedown', function(evt) {
  if(evt.button == 0) {
    // left click
  }

这是按钮的点击值：

left button=0, 
middle button=1 (if present),
right button=2

您可以查看以下链接中显示的示例以获取更多详细信息：

MouseEvent.button

<script>
var whichButton = function (e) {
    // Handle different event models
    var e = e || window.event;
    var btnCode;

    if ('object' === typeof e) {
        btnCode = e.button;

        switch (btnCode) {
            case 0:
                console.log('Left button clicked.');
            break;

            case 1:
                console.log('Middle button clicked.');
            break;

            case 2:
                console.log('Right button clicked.');
            break;

            default:
                console.log('Unexpected code: ' + btnCode);
        }
    }
}
</script>

<button onmouseup="whichButton(event);" oncontextmenu="event.preventDefault();">
    Click with mouse...
</button>

Answer 2

试试这个可能对你有用

document.getElementById("mydiv").onmousedown = function(event) {
 myfns(event)
};

var myfns = function(e) {

  var e = e || window.event;
  var btnCode;

  if ('object' === typeof e) {
    btnCode = e.button;

    switch (btnCode) {
      case 0:
        console.log('Left');
        break;

      case 1:
        console.log('Middle');
        break;

      case 2:
        console.log('Right');
        break;

    }
  }
}

<div id="mydiv">Click with mouse...</div>

参考

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button