Unerwartetes Ionon-Verhalten

Question

Betrachten Sie diese code. Ich kann nicht herausfinden, warum es sich so verhält. Alles, was ich brauche, ist das Wiedergabesymbol, das sich mit dem Pausensymbol jedes Mal ändert, wenn ich auf überall innerhalb der <td> klicke. Es verhält sich wie erwartet, wenn ich innerhalb der <td> aber außerhalb des Symbols selbst klicke. Wenn ich jedoch auf das Symbol selbst klicke, verhält es sich beim ersten Mal gut und stoppt dann.

'Das Ionicon ist in das <a>-Tag eingewickelt, das ein Kind des Elements <td> ist. Der Event-Listener ist auf der <td>, also was könnte das Problem sein?

Danke.

Answer 1

Ok, es herausgefunden. Es scheint ein Artefakt zu sein, das entsteht, wenn ein Element aus einer Vorlage erstellt wird und die Art und Weise implementiert wird, wie mouseenter implementiert wird.

Das Problem ist, dass das mouseenter Ereignis (hoverOn Teil der .hover()) auslöst, wenn es nicht sollte. Jedes Mal, wenn ein neues Ionicon aus einer Vorlage erstellt wird, löst es das Ereignis mouseenter aus, wenn sich der Cursor ein wenig bewegt.

Logisch mouseenter sollte nicht ausgelöst werden, wenn das Element erscheint, weil mouseenter ausgelöst werden soll, wenn ein Listener-Element oder dessen Abkömmling über schwebt, und nur dann aufrufen, wenn der Cursor alle Elemente des Ereignisses verlässt und dann eintritt nochmal. Ich denke, das ist ein Artefakt, ein Element aus einer solchen Vorlage zu erstellen. Vielleicht liegt es daran, dass DOM aktualisiert wird und die Tatsache verwirft, dass sich der Cursor bereits innerhalb des Elements befindet. So löst mouseenter erneut aus und löst wiederum das Erstellen eines neuen Spielsymbols aus. Dann wiederholt es sich.

Diese codepen sollte es gut erklären. Wenn Sie den Mauszeiger über die Wiedergabetaste bewegen, wird der Zähler mouseenter jedes Mal erhöht, wenn Sie die Maus ein wenig bewegen, da jedes Mal, wenn eine Maus bewegt wird, eine neue Wiedergabeschaltfläche erstellt wird. Wenn Sie die Zeile löschen, die eine neue Wiedergabeschaltfläche erstellt, verhält sie sich wie mouseenter sollte und nur ausgelöst wird, wenn der Cursor das Element betritt.

Answer 2

Wenn Sie auf das <a> Tag klicken, scheint es auch das Eltern-<td> Hover-Ereignis auszulösen. Sobald Lösung ist versuchen Sie den folgenden Code für Hover.

var hovOn = function(event) { 
     if(playOrPause==='play') { 

    $(this).html(pauseButtonTemplate); 
    playOrPause = 'pause'; 
    } else { 
    $(this).html(playButtonTemplate); 
    playOrPause = 'play'; 
    } 
}; 

Answer 3

Wie @Vijai sagte Ihr Problem mit dem Hover-Ereignis .. Und während ich nicht viel über Ihr Projekt wissen und Sie müssen wirklich .empty() auf schweben oder brauchen Sie nur auf das Symbol hide() .. können Sie versuchen, diesen Teil des Codes anstelle von Ihnen

var hovOn = function(event) { 
    if($(this).find('a').length < 1){ 
    $(this).html(playButtonTemplate); 
    }else{ 
    $(this).find('a').show(); 
    } 
}; 
var hovOff = function(event) { 
    $(this).find('a').hide(); 
} 

Codepen Here