Как запустить EventListener на кусок HTML, если он был создан JS после загрузки страницы? - PullRequest
Новая
       36

Как запустить EventListener на кусок HTML, если он был создан JS после загрузки страницы?

0 голосов
/ 12 сентября 2018

У меня есть движущаяся рамка в A-рамке, 

<a-entity id="myboxes">
   <a-box id="mybox" material="src: #material" width="0" height="4" depth="0.4" transparent="true" opacity="0.75" position="-5 -1.3 -15" rotation="0 0 0" scale="2 0.5 3">
      <a-animation attribute="position" to="0 0 5" fill="forwards" dur="5000"></a-animation>
    </a-box>   
</a-entity>

И я хочу переместить ее в новую позицию, если она достигла конечной позиции, где заканчивается анимация, или если я щелкнул по ней.Я попытался так: 

document.getElementById("mybox").addEventListener('componentchanged', function(){
     if((document.getElementById("mybox").getAttribute('position').x >-1) && (document.getElementById("mybox").getAttribute('position').y >-1) && (document.getElementById("mybox").getAttribute('position').z >4.8)){
        newBox();
     }
});

function newBox() {
        var X = 0;
        var Z = 0;

        var val = Math.floor((Math.random() * 50) + 20);
        var plusOrMinus = Math.random() < 0.5 ? -1 : 1;
        X = val * plusOrMinus;
        val = Math.floor((Math.random() * 50) + 20);
        plusOrMinus = Math.random() < 0.5 ? -1 : 1;
        Z = val * plusOrMinus;
        console.log("X: " + X + " Z: " + Z);
        document.getElementById('mybox').setAttribute('position', X + " -1.3 " + Z);
}

Но это не сработало, поэтому я попробовал так: 

document.getElementById("mybox").addEventListener('componentchanged', function(){
     if((document.getElementById("mybox").getAttribute('position').x >-1) && (document.getElementById("mybox").getAttribute('position').y >-1) && (document.getElementById("mybox").getAttribute('position').z >4.8)){
        document.getElementById("myboxes").innerHTML = "";
        newBox();
     }
});

function newBox() {
        var X = 0;
        var Z = 0;

        var val = Math.floor((Math.random() * 50) + 20);
        var plusOrMinus = Math.random() < 0.5 ? -1 : 1;
        X = val * plusOrMinus;
        val = Math.floor((Math.random() * 50) + 20);
        plusOrMinus = Math.random() < 0.5 ? -1 : 1;
        Z = val * plusOrMinus;
        console.log("X: " + X + " Z: " + Z);
        document.getElementById("myboxes").innerHTML = '<a-box id="mybox" material="src: #material" width="0" height="4" depth="0.4" transparent="true" opacity="0.75" position="' + X + ' -1.3 ' + Z + '" rotation="0 0 0" scale="2 0.5 3"> <a-animation attribute="position" to="0 0 5" fill="forwards" dur="5000"></a-animation></a-box>';
}

Но таким образом окно появляется только два раза, один раз, когда страницазагружается, и HTML запускается, и еще раз при выполнении EventListener.Но почему он не работает в третий, четвертый и т. Д. Раз?Как я могу решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 12 сентября 2018

Извлеките код с помощью обработчика для функции: 

function rebindBox() {
    document.getElementById("mybox").addEventListener('componentchanged', function(){
        if((document.getElementById("mybox").getAttribute('position').x >-1) && 
           (document.getElementById("mybox").getAttribute('position').y >-1) && 
           (document.getElementById("mybox").getAttribute('position').z >4.8)) {
            document.getElementById("myboxes").innerHTML = "";
            newBox();
        }
    });
}

И вызовите его после воссоздания: 

document.getElementById("myboxes").innerHTML = '<a-box id="mybox" material="src: #material" width="0" height="4" depth="0.4" transparent="true" opacity="0.75" position="' + X + ' -1.3 ' + Z + '" rotation="0 0 0" scale="2 0.5 3"> <a-animation attribute="position" to="0 0 5" fill="forwards" dur="5000"></a-animation></a-box>';
rebindBox();
0 голосов
/ 12 сентября 2018

Это работает, если вы добавляете прослушиватель событий в поле каждый раз, когда создаете его: 

document.getElementById("myboxes").innerHTML = (....)
document.getElementById("mybox").addEventListener('componentchanged', listenerfnc)

как и я здесь .

Но, по-моему, вы должны подходить к этому по-другому.

1) Если вам нужно изменить положение, измените положение вместо того, чтобы перезаписывать все innerHTML: 

var newPosition = new THREE.Vector3( randomX, randomY, randomZ );
mybox.setAttribute("position", newPosition)

и перезапустите анимацию:

а) установить начало события для запуска анимации: 

<a-animation begin="start">

б) испустить его 

animationReference.emit("start")

c) (необязательно) Проверьте компонент анимации Ngo Kevins
Он должен скоро заменить <a-animation>, поэтому я бы рекомендовал привыкнуть к нему.

2) Создайте элемент HTML, используя document.createElement("a-box) вместо внесения изменений в innerHTML 
var box = document.createElement("a-box")
box.setAttribute("position", newPos)
box.addEventListener("event", callback)
sceneReference.appendChild(box)
...