我在使用HTML和Canvas在屏幕上绘图。我的要求是只能用左键进行绘制,右键不起任何作用。我尝试了以下方法:
canvas.oncontextmenu = e => {
e.preventDefault();
e.stopPropagation();
}
它禁用了右键菜单,但我能够使用左右键点击画布(最终在其上绘制)。我错过了什么吗?
我在使用HTML和Canvas在屏幕上绘图。我的要求是只能用左键进行绘制,右键不起任何作用。我尝试了以下方法:
canvas.oncontextmenu = e => {
e.preventDefault();
e.stopPropagation();
}
尝试:
<canvas oncontextmenu="return false;"></canvas>
canvas.bind('contextmenu', function(e){
return false;
});
使用JQuery:
$('body').on('contextmenu', '#myCanvas', function(e){ return false; });
试试这个:
canvas.addEventListener('mousedown', (event) => {
if (event.which !== 1) {
event.preventDefault();
}
});
还应该禁用出现上下文菜单。点击中间鼠标按钮也不会产生任何效果。
event.which
包含按下的鼠标按钮的索引。1
是左键,2
是中间键,3
是右键。
preventDefault()
防止执行默认浏览器行为(如打开上下文菜单等),它可以应用于许多情况。
顺便说一下,stopPropagation()
用于停止在子元素中执行此类事件(在本例中是上下文菜单打开)。<canvas>没有子标记,因此可以省略。
请尝试以下操作:
const canvas = document.getElementById('myCanvas');
canvas.oncontextmenu = () => false;
myCanvas 最终是赋予画布的ID,即
<canvas id="myCanvas"></canvas>