如何将 Javascript 事件限制在一个容器中？

Question

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

我需要鼠标事件只影响我的脚本 canvas，而不是当它在浏览器的其他部分时 window。

我对此有点陌生，如果这很简单，我深表歉意。

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 对象。然后，当 canvas.

上没有发生事件时，您将不会收到任何鼠标或触摸消息。

如果出于某种原因，这不切实际，那么您可以使用一些通用代码检查每个 event.target 以查看事件是否源自 canvas 对象，而不做任何事情如果事件没有超过 canvas 对象。

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

如何将 Javascript 事件限制在一个容器中？

How to restrict Javascript events to a container?

javascript

dom-events

mouseover

restriction