不要在父级上触发鼠标输入事件-解网

问：

对于包含文本的标签（，，），我添加了一个属性。将鼠标悬停在具有属性的标签上时，需要显示该按钮。一切正常，除非标签是嵌套的，例如：tdplidata-iddata-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>

内容由用户通过网站上的编辑器添加，因此对于标签相互嵌套的级别没有严格的规则。

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

jquery 嵌套事件侦听器 mouseenter

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

不要在父级上触发鼠标输入事件

Don't fire mouseenter event on parent

评论

评论