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

Question

我正在尝试遵循 https://codepen.io/jordizle/pen/haIdo/ 中的多维数据集代码

最终，立方体适用于我正在从事的元素。但是我遇到了一个问题。多维数据集响应它所在的 div 容器外部的事件。例如，如果我使用鼠标拖动不同的 div，位于单独 div 上的多维数据集响应事件。

我不确定如何解决这个问题。

我在这里创建了一个 fiddle :https://jsfiddle.net/sourabhtewari/75c6qcm5/2/

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

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

在

中初始化视口(viewport)

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

我看到绑定(bind)事件的元素对我来说看起来不错。因此，我正在解决为什么多维数据集会对其父 div 之外的事件使用react。

绑定(bind)事件看起来像这样

 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;
    });

如果有人能帮助我，我将不胜感激!

Answer 1

那是因为鼠标事件监听器绑定(bind)到 document (整页)。

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

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

您可以在立方体前面使用一个 div 来捕获事件:

• 添加 <div id="cube-overlay"></div> 在您的立方体前面。确保它在所有方向上覆盖立方体的整个“区域”。
• 抓取覆盖的 div 并在 bindEvent 中传递它函数而不是 document .

示例:

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

更新的 fiddle :

这是更新的 JSFiddle .在这个 fiddle 中，我只是给出了一个 id="viewport"在你已经存在的<div class="viewport">元素并将其用作 bindEvent争论。