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));
     }
});

这样你就可以将mouseevent附加到除ul和.printToolbar

之外的所有元素

编辑：

删除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));
    }
});

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

1 个答案: