Addeventlistener не распознается в элементе html в собственном классе ES6 - PullRequest
Новая
       15

Addeventlistener не распознается в элементе html в собственном классе ES6

0 голосов
/ 05 мая 2020

Я пытаюсь создать свой собственный класс DragDrop в ES6.

Но когда я пытаюсь установить прослушиватели событий, Chrome инструменты разработки не показывают подключенных обработчиков (onmousex: null).

Браузер не показывает ошибок, а console.log пишет, что метод makeDraggable () был выполнен.

Возможно ли, что класс вызван на поздней стадии d ie процесса загрузки страницы?

Класс DragDrop вызывается после window.load. 

window.onload = function(){
 var app = new App();
}

Приложение класса: 

class App {
constructor(){
    this.dragDrop = new DragDrop(document.querySelectorAll("rect"));
    console.log(this.dragDrop);
 }
}

Класс DragDrop: 

    class DragDrop {

    constructor(elements){
        this.elements = elements;
        this.makeDraggable();
        this.currentElement = null;
    }

    makeDraggable(){
        this.elements.forEach(element => {
            element.addEventListener('mousedown', this.start.bind(this)),
            element.addEventListener('mousemove', this.drag.bind(this)),
            element.addEventListener('mouseup', this.drop.bind(this)),
            element.addEventListener('mouseleave', this.drop.bind(this))
        });
    }

    start(evt){
        if(this.elements.includes(evt.target)) this.currentElement = evt.target;
    }

    drag(evt){
        if(this.currentElement){
            evt.preventDefault();
            console.log(this.currentElement.getAttributeNS(null, "x"));
        }
    }

    drop(evt){}
}
...