galambalazs의 솔루션은 훌륭합니다! Chrome과 Firefox 모두에서 완벽하게 작동했습니다. 또한 브라우저 창에서 기본 이벤트가 발생하지 않도록 확장 할 수도 있습니다. 캔버스에서 앱을 만들고 있다고 가정 해 봅시다. 당신은 이것을 할 수 있습니다 :
var events = {
preventDefault: function(e) {
e = e || window.event;
if (e.preventDefault) e.preventDefault();
e.returnValue = false;
},
//spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36,
//left: 37, up: 38, right: 39, down: 40
keys: [32, 33, 34, 35, 36, 37, 38, 39, 40],
keydown: function(e) {
for (var i = events.keys.length; i--;) {
if (e.keyCode === events.keys[i]) {
events.preventDefault(e);
return;
}
}
},
wheel: function(e) {
events.preventDefault(e);
},
disable: function() {
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', events.wheel, false);
}
window.onmousewheel = document.onmousewheel = events.wheel;
document.onkeydown = helpers.events.keydown;
},
enable: function() {
if (window.removeEventListener) {
window.removeEventListener('DOMMouseScroll', events.wheel, false);
}
window.onmousewheel = document.onmousewheel = document.onkeydown = null;
}
}
그런 다음 앱에서 마우스, 키보드, 터치 이벤트 등과 같은 자체 이벤트를 처리한다고 가정 해 봅시다. 마우스가 캔버스 안에 들어가면 기본 이벤트를 비활성화하고 마우스를 다시 활성화 할 수 있습니다 외출:
function setMouseEvents(canvas) {
var useCapture = false;
//Mouse enter event
canvas.addEventListener('mouseenter', function(event) {
events.disable();
}, useCapture);
//Mouse leave event
canvas.addEventListener('mouseleave', function(event) {
events.enable();
}, useCapture);
}
이 핵으로 마우스 오른쪽 버튼 클릭 메뉴를 비활성화 할 수도 있습니다.
function disableRightClickMenu(canvas) {
var my_gradient = canvas.context.createLinearGradient(0, 0, 0, 225);
my_gradient.addColorStop(0, "white");
my_gradient.addColorStop(1, "white");
canvas.context.fillStyle = my_gradient;
canvas.context.fillRect(0, 0, canvas.width, canvas.height);
canvas.oncontextmenu = function() { return false; };
}