javascript - 如何在使用 JQuery 悬停该 HTML 元素时在元素内设置工具栏？

Question

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

这就是我试图用每个 HTML 元素设置菜单栏的方法，但我无法自行分离菜单栏上的事件，这会引发一些 JS 错误，是否有其他方法可以实现一样吗？

Answer 1

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

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

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

编辑:

删除 UL child 的附件:

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