Javascript 仅在div内处理鼠标和触摸事件

我正在尝试从中跟踪多维数据集代码

最终，这个立方体在我正在做的一个项目上工作。但我遇到了一个问题。多维数据集响应它所在的div容器外部的事件。例如，如果我使用鼠标拖动另一个div，则位于单独div上的多维数据集将响应该事件

我不知道如何解决这个问题

我在这里创作了一把小提琴：

我不是什么JavaScript/jQuery专家，但这是一种初始化方法

var cube = new Cube({
    viewport: viewport,
    element: document.getElementsByClassName('cube')[0]
});

在中初始化视口

var viewport = new Viewport({
    element: document.getElementsByClassName('cube')[0],
    fps: 20,
    sensivity: 0.1,
    sensivityFade: 0.93,
    speed: 2,
    touchSensivity: 1.5
});

我看到绑定事件的元素在我看来是正常的。因此，我对多维数据集对其父div之外的事件作出反应的原因有一个了解

绑定事件如下所示

 bindEvent(document, 'mousedown', function () {
        self.down = true;
    });

    bindEvent(document, 'mouseup', function () {
        self.down = false;
    });

    bindEvent(document, 'keyup', function () {
        self.down = false;
    });

    bindEvent(document, 'mousemove', function (e) {
        self.mouseX = e.pageX;
        self.mouseY = e.pageY;
    });

    bindEvent(document, 'touchstart', function (e) {

        self.down = true;
        e.touches ? e = e.touches[0] : null;
        self.mouseX = e.pageX / self.touchSensivity;
        self.mouseY = e.pageY / self.touchSensivity;
        self.lastX = self.mouseX;
        self.lastY = self.mouseY;
    });

    bindEvent(document, 'touchmove', function (e) {
        if (e.preventDefault) {
            e.preventDefault();
        }

        if (e.touches.length === 1) {

            e.touches ? e = e.touches[0] : null;

            self.mouseX = e.pageX / self.touchSensivity;
            self.mouseY = e.pageY / self.touchSensivity;

        }
    });

    bindEvent(document, 'touchend', function (e) {
        self.down = false;
    });

---

如果有人能帮我，我会很感激的

这是因为鼠标事件侦听器绑定到

文档（整个页面）

这是捕获鼠标事件的部分。注意
document
变量，它基本上引用了页面的文档

bindEvent(document, 'mousedown', function() {
  self.down = true;
});

您可以使用多维数据集前面的div来捕获事件：


在多维数据集前面添加一个
。确保它在所有方向上覆盖立方体的整个“区域”
抓取该重叠div并将其传递到
bindEvent
函数中，而不是
文档中


示例：

var overlay = document.getElementById("cube-overlay");

bindEvent(overlay, 'mousedown', function() {
  self.down = true;
});

// Make sure you do this change on all the `bindEvent` functions that 
// deal with mouse/touch events

更新的小提琴：

这里有一个更新的。在这把小提琴中，我只是在已经存在的
元素上给出了一个
id=“viewport”
，并将其用作
bindEvent
参数