不要在父级上触发 mouseenter 事件

Question

对于包含文本的标签（td、p、li），我添加了一个data-id 属性。将鼠标悬停在具有data-id 属性的标签上时，需要显示该按钮。一切正常，除非标签是嵌套的，例如：

<li aria-level="1" data-id="66389178">
  <p data-id="11168609">text</p>
</li>

此示例显示两个按钮，一个用于父级，一个用于子级。我添加了e.stopImmediatePropagation();，但这不适用于td。这是代码本身：

$('[data-id]').mouseenter(function (e) {
  GodObj.btnadd = $('<button class="btn btn-outline-dark btn-note-tag">' +
    '<i class=\'fa fa-commenting\' aria-hidden=\'true\'></i>' + '</button>');

  $(this).append(GodObj.btnadd);
  e.stopImmediatePropagation();
}).mouseleave(function () {
  $(GodObj.btnadd).remove();
});

绘制两个按钮时的示例：

<td aria-level="1" data-id="66389170">
  <p data-id="11168601">...</p>
</td>

内容是用户通过网站上的编辑器添加的，因此标签之间的嵌套级别没有严格的规定。

如何使按钮只渲染一次或为父元素或子元素渲染？

Answer 1

你需要以e.stopImmediatePropagation();开头：

            $('[data-id]').mouseenter(function (e) {
                e.stopImmediatePropagation();
                GodObj.btnadd = $('<button class="btn btn-outline-dark btn-note-tag">' +
                    '<i class=\'fa fa-commenting\' aria-hidden=\'true\'></i>' +
                    '</button>');
                $(this).append(GodObj.btnadd);
            }).mouseleave(function () {
                $(GodObj.btnadd).remove();
            });