意外的 ionicons 行为

Question

考虑这个 code。我无法弄清楚为什么它的行为如此。我需要的只是每次单击 <td> 内的 任意位置 时播放图标与暂停图标交替出现。当我在 <td> 内部但在图标本身外部单击时，它的行为符合预期。但是，如果我单击图标本身，它第一次表现良好，然后停止。

'ionicon 包裹在 <a> 标签中，它是 <td> 元素的子元素。事件侦听器在 <td> 上，那么可能是什么问题？

谢谢。

Answer 1

当您点击 <a> 标签时，它似乎也触发了父 <td> 悬停事件。一旦解决方案是尝试下面的悬停代码。

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

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

Answer 2

正如@Vijai 所说，你的悬停事件有问题。虽然我对你的项目了解不多，但你确实需要 .empty() 悬停或者你只需要 hide()图标 .. 你可以试试这部分代码而不是你的

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

Answer 3

好的，明白了。这似乎是从模板创建元素和 mouseenter 实现方式产生的人工制品。

问题是 mouseenter 事件（.hover() 的 hoverOn 部分）在不应该触发的时候触发。每次从模板创建新的 ionicon 时，如果光标移动一点，它将触发 mouseenter 事件。

逻辑上 mouseenter 不应在元素出现时触发，因为 mouseenter 应该在侦听器元素或其后代悬停时触发，然后仅在光标离开所有元素时调用与事件关联的元素，然后再次进入。我认为这是从这样的模板创建元素的产物。可能是因为 DOM 得到更新并且它丢弃了光标已经在元素内的事实。所以 mouseenter 再次触发并依次触发创建一个新的播放图标。然后重复..

这个codepen应该很好解释吧。如果将鼠标悬停在播放按钮上，每次移动鼠标时 mouseenter 计数器都会增加，因为每次移动鼠标时，都会创建一个新的播放按钮。如果删除创建新播放按钮的行，它的行为与 mouseenter 应该的一样，仅在光标进入元素时触发。

意外的 ionicons 行为

Unexpected ionicons behaviour

html

javascript

css

jquery

ionicons