jQuery .on()事件 mouseover mouseout模仿hover情况异常

Question

$("#post-buy-table").on("mouseover mouseout", 'tr:gt(0)', function(event){
  if(event.type == "mouseover"){
      $(this).find("td:nth-child(3)").append("<a href='#' class='glyphicon glyphicon-edit'></a><a href='#' class='glyphicon glyphicon-trash'></a>");
  }else if(event.type == "mouseout"){
      $(this).find("td:nth-child(3)").empty();
  }
});

这段代码实现hover效果，当移到<table>中的<tr>行时，出现如下的图标，但是鼠标移到这些图标上的时候，应该会重复执行mouseover和mouseout的事件，一闪一闪的。请问是怎么回事？

alert(event.Target.tagName);

通过这段代码得知执行event的DOM元素竟然不是<tr>，而是<td>,请问这是怎么回事？

Answer 1

那是因为你这段代码在不断的触发由 tr、td 和 span(如果你的图标是 span 实现的话) 这几个 DOM 产生的 mouseover 和 mouseout 事件（实际上如果你的 tr 没有 padding 的话，不会有 tr 的相关事件发生）。然后实际上，不管是 td 还是 span 都是在 tr 里面，所以由同一个 tr 内的其它元素引发的 mouseover 事件和 tr 的 mouseout 事件应该被忽略。

示例：

https://jsfiddle.net/tv3Loq4h/

$("table").on("mouseover mouseout", "tr:gt(0)", function(e) {
    // console.log(e.type, e.currentTarget.tagName, e.target);
    var tr = $(this);
    if (e.type === "mouseover") {
        if (!tr.is(".over")) {
            tr.addClass("over");
        }
    } else {
        console.log(tr);
        if (tr.is(".over")) {
            tr.removeClass("over");
        }
    }
});