javascript - 意外的离子行为

Question

考虑这段代码。我无法弄清楚它为什么会这样。我所需要的只是每次单击<td>. <td>当我在图标内部但在图标本身外部单击时，它的行为符合预期。但是，如果我单击图标本身，它第一次表现良好，然后停止。

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

谢谢。

Answer 1

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

在这里写代码

Answer 2

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

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

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

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

Answer 3

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

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

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