處理鼠標和觸摸事件只是一個div

裏面我試圖遵循https://codepen.io/jordizle/pen/haIdo/處理鼠標和觸摸事件只是一個div

最後對我工作的一個項目立方體作品立方碼。但我遇到了一個問題。多維數據集響應它所在的div容器外部的事件。例如，如果我使用鼠標拖動不同的div，則位於單獨div上的多維數據集將響應該事件。

我不確定如何解決此問題。

我已經在這裏創造一個小提琴：https://jsfiddle.net/sourabhtewari/75c6qcm5/2/

我倒沒一個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 
});

被初始化

我看到綁定事件的元素對我來說看起來沒問題。因此，我正在解決爲什麼多維數據集會對其父窗口外部的事件作出反應。

結合事件看起來像這些

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

如果有人能幫助我在這裏，我將感謝！

來源

2017-06-17 Navyseal

這是因爲鼠標事件偵聽器綁定到document（整個頁面）。

這是捕捉鼠標事件的部分。請注意0變量，它基本上引用頁面的文檔。

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

更新小提琴：

這裏有一個更新JSFiddle。在這個小提琴中，我只是在你已有的<div class="viewport">元素上給出了一個id="viewport"，並用它作爲bindEvent的參數。

來源

2017-06-17 17:02:43

處理鼠標和觸摸事件只是一個div

回答

相關問題