为什么代码加了e.preventDefault()，右键点击canvas时系统上下文菜单仍弹出？

问题原因 #

• 你将e.preventDefault()放在了mousemove事件的右键判断分支中，但系统右键上下文菜单是由独立的contextmenu事件触发的，该事件不受mousemove事件的阻止逻辑影响，所以菜单仍然会弹出。
• 额外优化点：当前你把左右键画笔属性的判断放在mousemove事件中，会导致鼠标每移动一次就触发一次判断，性能开销更大，建议移到mousedown事件中处理。

修复步骤 #

1. 给canvas绑定contextmenu事件，直接阻止默认行为，彻底禁用canvas区域的右键菜单
2. 调整右键逻辑的触发位置，保证功能正常

修复后完整代码 #

//Canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//Variables
var canvasx = $(canvas).offset().left;
var canvasy = $(canvas).offset().top;
var last_mousex = last_mousey = 0;
var mousex = mousey = 0;
var mousedown = false;
var tooltype = 'draw';

// 新增：阻止canvas区域的右键菜单
$(canvas).on('contextmenu', function(e) {
    e.preventDefault();
});

//Mousedown
$(canvas).on('mousedown', function(e) {
      last_mousex = mousex = parseInt(e.clientX-canvasx);
      last_mousey = mousey = parseInt(e.clientY-canvasy);
      mousedown = true;
      // 把按键判断移到这里
      switch (e.which) {
        case 1:
          ctx.globalCompositeOperation = 'source-over';
          ctx.strokeStyle = 'black';
          ctx.lineWidth = 3;
          break;
        case 2:
          alert("midde mouse click");
          break;
        case 3:
          ctx.globalCompositeOperation = 'destination-out';
          ctx.lineWidth = 10;
          break;
      }
});

//Mouseup
$(canvas).on('mouseup', function(e) {
    mousedown = false;
});

//Mousemove
$(canvas).on('mousemove', function(e) {
    mousex = parseInt(e.clientX-canvasx);
    mousey = parseInt(e.clientY-canvasy);
    if(mousedown) {
        ctx.beginPath();
        ctx.moveTo(last_mousex,last_mousey);
        ctx.lineTo(mousex,mousey);
        ctx.lineJoin = ctx.lineCap = 'round';
        ctx.stroke();
    }
    last_mousex = mousex;
    last_mousey = mousey;
    //Output
    $('#output').html('current: '+mousex+', '+mousey+'<br/>last: '+last_mousex+', '+last_mousey+'<br/>mousedown: '+mousedown);
});

//Use draw|erase
use_tool = function(tool) {
    tooltype = tool; //update
}

内容的提问来源于stack exchange，提问作者mangadrawing.123