予期せぬアイオニコンの振る舞い

Question

これを考慮するcode。 なぜそれが動作するのかわかりません。私が必要とするのは、<td>の中ののどこかでをクリックするたびに、再生アイコンが一時停止アイコンと交互に表示されます。 <td>の中をクリックすると、アイコン自体の外では期待どおりに動作します。ただし、アイコン自体をクリックすると、初めて動作してから停止します。

'<td>要素の子である<a>タグでイオニコンが包まれています。イベントリスナーは<td>にありますので、何が問題なのでしょうか？

ありがとうございました。

Answer 1

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

、それを考え出しました。これは、テンプレートから要素を作成し、方法 mouseenterが実装されていることから生ずるアーチファクトのようです。

問題は、mouseenterイベント（hoverOnの一部、.hover()の部分）が発生しないようにすることです。新しいイオニコンがテンプレートから作成されるたびに、カーソルが少し動くとmouseenterイベントが発生します。 は、リスナー要素またはその子孫がホバーオーバーされたときにトリガーする必要があり、カーソルがイベントに関連付けられているすべての要素を残してから呼び出したときに呼び出されるため、論理的にmouseenterがトリガーされないようにする必要があります。再び。私はこれがそのようなテンプレートから要素を作成する人工物だと思う。 DOMが更新され、カーソルがすでに要素内にあるという事実が破棄されるためかもしれません。したがってmouseenterが再びトリガーし、新しい再生アイコンが作成されます。その後、それが繰り返されます。

このcodepenはそれをうまく説明する必要があります。再生ボタンの上にマウスを置くと、マウスを動かすたびに新しいボタンが作成されるため、mouseenterのカウンターはマウスを動かすたびに増加します。新しい再生ボタンを作成する行を削除すると、カーソルが要素に入ったときにだけトリガーするように、mouseenterが動作するように動作します。

Answer 2

<a>タグをクリックすると、親の<td>ホバーイベントがトリガーされているようです。ソリューションがホバーのために以下のコードを試してみる。

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

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

Answer 3

@Vijaiとして言ったホバリングイベントであなたの問題..私はあなたのプロジェクトについて多くを知らないとあなたが本当にホバー上.empty()を必要とするか、またはあなただけのアイコンをhide()する必要がありながら..あなたのことが可能このコードの一部を試す代わりに、あなたの

[OK]を

Codepen Here