Javascript-Ereignis 'mouseenter' zweimal zum ersten Mal ausgelöst - Meteor

Question

In meiner Meteor-Anwendung wird das Ereignis 'mouseenter' zweimal ausgelöst, wenn ich meine Maus zum ersten Mal auf das Element setze. Nach dem ersten Mal funktioniert es richtig.

Der Ereignishandler wird auch einmal ausgeführt, wenn ich die Anwendung starte, ohne die Maus zu bewegen. Hier

ist der Code:

Template.filters.events({ 
'mouseenter .filters-box': (event, element)=>{ 
    var target = Template.instance().$(event.target).children('.filters-popup')[0] 
    console.log('enter'); 
    console.log(target); 
    if(!target){ 
     return; 
    } 

    var prevWidth = target.style.width; 
    target.style.width = 'auto'; 
    var endWidth = getComputedStyle(target).width; 
    target.style.width = prevWidth; 

    target.offsetHeight; 

    target.style.width = endWidth; 

}, 
'mouseleave .filters-box': (event, element)=>{ 
    var target = Template.instance().$(event.target).children('.filters-popup')[0]; 
    console.log('leave'); 
    console.log(target); 
    if(!target){ 
     return; 
    } 

    target.style.width = getComputedStyle(target).width; 
    target.offsetHeight; 
    target.style.width = 0; 
} 
}); 

Dies ist die Ausgabe im Browser-Konsole:

Navigated to http://localhost:3000/ 
filters.js:26 enter 
filters.js:27 undefined 

Dann, wenn ich die Maus in das und aus dem Element bewegen:

filters.js:26 enter 
filters.js:27 <div class=​"filters-popup" style=​"width:​ 0px;​">​…​</div>​ 
filters.js:26 enter 
filters.js:27 <div class=​"filters-popup" style=​"width:​ 0px;​">​…​</div>​ 
filters.js:44 leave 
filters.js:45 <div class=​"filters-popup" style=​"width:​ 0px;​">​…​</div>​ 
filters.js:44 leave 
filters.js:45 <div class=​"filters-popup" style=​"width:​ 0px;​">​…​</div>​ 

Das nächste Mal, wenn ich es tue, wird nur ein Ereignis von jedem Typ ausgelöst:

filters.js:26 enter 
filters.js:27 <div class=​"filters-popup" style=​"width:​ 0px;​">​…​</div>​ 
filters.js:44 leave 
filters.js:45 <div class=​"filters-popup" style=​"width:​ 0px;​">​…​</div>​ 

Ich versuchte mit event.preventDefault(); und event.stopPropagation(); Methoden, aber es hat immer noch nicht richtig funktioniert.

Answer 1

Enthält Ihr <div> irgendwelche untergeordneten Elemente? Sie lösen wahrscheinlich auch ein mousentereignis aus. Sie können event.preventDefault() am Anfang Ihres Ereignishandlers setzen. Dies sollte verhindern, dass andere Ereignishandler ausgelöst werden.

Wenn das Ereignis ausgelöst wird, wenn die Maus während des Starts in der Div ist, würde ich mir tatsächlich vorstellen, dass es ausgelöst wird. Wenn sich die Position/Größe des Divs während des Renderns ändert, können Sie es erhalten, auch wenn sich die Maus an einer anderen Stelle befindet als am Ende des Divs. Eine mögliche Lösung besteht darin, den Event-Handler erst zu deklarieren, wenn das Rendering abgeschlossen ist, etwa so, als würde man Dinge in einen Meteor.startup-Aufruf stecken.