Javascript 如何在使用JQuery悬停HTML元素时在元素内部设置工具栏？ $（'body'）。在（'mouseover mouseout'，'*：not（.printToolBar'）上，函数（e）{ 如果（此===e.target）{ （e.type=='mouseover'？setMenuBox（e.target）：移除menubox（e.target））； } }); 功能设置菜单框（obj）{ $（对象）。换行（“”）； $（“.toolBarWrapper”）.append（$（“.printToolBar”）； } 功能移除菜单框（obj）{ $（“.toolBarWrapper”）.remove（“.printToolBar”）； $（obj）.unwrap（）； } 函数createToolBar（）{ var ul=$（“”）.attr({ “类”：“打印工具栏”， 样式：“边框：1px实心#ff0000；位置：绝对；顶部：0；右侧：0；” }); 变量li=$（“”）.attr({ “className”：“打印工具栏列表” }).文本（“打印”）； var printLi=li.clone（）.attr({ id:“打印” }).on（'click'，函数（e）{ console.log（this）； }); ul.附录（印刷体）。附录（“正文”）； }; createToolBar（）；

这就是我试图做的，用每个HTML元素设置菜单栏，但我无法分离菜单栏上的事件，这是由于抛出一些JS错误造成的问题，有没有其他方法可以实现同样的效果？

要删除ul元素上的“悬停”行为，我认为您需要更新第一行代码：

$('body').on('mouseover mouseout', '*:not(.printToolBar)', function (e) {
    if (this === e.target) {
        (e.type === 'mouseover' ? setMenuBox(e.target) : removeMenuBox(e.target));
    }
});

function setMenuBox (obj){
    $(obj).wrap('<div class="toolBarWrapper" style="position:relative;"/>');
    $(".toolBarWrapper").append($('.printToolBar'));
}

function removeMenuBox (obj){
    $(".toolBarWrapper").remove('.printToolBar');
    $(obj).unwrap();
}

function createToolBar(){
    var ul = $("<ul>").attr({
        'class': "printToolBar",
        style: "border: 1px solid #ff0000; position:absolute; top:0 ; right: 0;"
    });
    var li = $("<li>").attr({
        'className': "printToolBarList"
    }).text('Print');
    var printLi = li.clone().attr({
        id: "print"
    }).on('click',function(e){ 
        console.log(this);
    });     
    ul.append(printLi).appendTo("body");
};
createToolBar();

通过这种方式，您可以将mouseevent附加到除ul和.printToolbar之外的所有元素

编辑：

要移除UL儿童的附件，请执行以下操作：

$('body').on('mouseover mouseout', '*:not(.printToolBar), *:not(ul)', function (e) {
     if (this === e.target) {
        (e.type === 'mouseover' ? setMenuBox(e.target) : removeMenuBox(e.target));
     }
});

---

你能分享你的html吗？很难看出问题来自何处，我会这样说：“*：not（.printToolBar）”它选择任何元素，但printToolBar你可以在任何HTML中尝试它，比如说如果我有一个图像标签，它被DIV包装，里面我附加了UL，这一切都发生在悬停事件上，但是我想防止在JS上创建的UL上的悬停事件。请看我的答案，我认为你认为是在飞的，实际上是“on”方法，Dybnnalistic地将事件附加到元素问题上，悬停UL元素抛出跟随错误。{HierarchyRequestError:无法在层次结构中的指定点插入节点}是的，你说得对，UL儿童导致了问题，现在它得到了修复，事件冒泡导致了问题，非常感谢。

$('body').on('mouseover mouseout', '*:not(ul.printToolBar), *:not(ul.printToolBar >    *)', function (e) {
    if (this === e.target) {
       (e.type === 'mouseover' ? setMenuBox(e.target) : removeMenuBox(e.target));
    }
});