Question

如何将这些鼠标事件限制在容器中？

我需要鼠标事件仅在脚本位于画布上时影响脚本，而不是在脚本位于浏览器窗口的其他部分时。

我对此有点新意，所以如果这很简单，我会道歉。

document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
//
window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
//
function onDocumentMouseMove(event) {
    mouseX = event.clientX - windowHalfX;
    mouseY = event.clientY - windowHalfY;
}

function onDocumentTouchStart(event) {
    if (event.touches.length > 1) {
        event.preventDefault();
        mouseX = event.touches[0].pageX - windowHalfX;
        mouseY = event.touches[0].pageY - windowHalfY;
    }
}

function onDocumentTouchMove(event) {
    if (event.touches.length == 1) {
        event.preventDefault();
        mouseX = event.touches[0].pageX - windowHalfX;
        mouseY = event.touches[0].pageY - windowHalfY;
    }
}

Answer 1

解决此问题的最直接方法是让您的脚本将事件侦听器连接到canvas对象而不是document对象。然后，当事件未在画布上发生时，您将无法获得任何鼠标或触摸消息。

如果由于某种原因，这是不切实际的，那么您可以使用一些常用代码检查每个event.target，以查看事件是否源自画布对象，如果不是，则不对事件执行任何操作在画布对象上。

此外，您发布的代码在第四个事件侦听器之后还有一个无关的}。

如何将javascript事件限制为容器？

1 个答案: