JS

Ztree添加鼠标右键事件并显示菜单

"DisPlay menu by right click in Ztree."

Posted by 王晓东 on August 9, 2019

奈何公司前端人员请假,只有我来了。


需求

右击树节点,出现如下图所示的效果。

""


代码

1、在setting 配置里面,给callback设置,右击事件onRightClick,并写一个onRightClick的js函数。

callback: {
    onRightClick: onRightClick
}

右键事件函数:

function onRightClick(event, treeId, treeNode) {
  
}

2、因为浏览器有右击的默认事件,所以要禁用默认鼠标右击事件

document.oncontextmenu = function(){
    return false;
};

以上步骤,组成右击事件以下代码:

// 右击事件
function onRightClick(event, treeId, treeNode) {
    document.oncontextmenu = function(){
        return false;
    };
    //alert(1)
    if (treeNode.type == 0) {
        return;
    }
    showRMenu("node", event.clientX, event.clientY);
}

众所周知,在PC端,我们通常用event.clienX或者event.clientY来获取手指的坐标。

3、触发事件之后,出现提示框 HTML代码

<div id="rMenu">
    <a  href="javascript:void(0);" class="list-group-item aMenu" >折 叠</a><br>
    <a  href="javascript:void(0);" class="list-group-item aMenu" >刷 新</a><br>
    <a  href="javascript:void(0);" class="list-group-item aMenu" >添 加</a><br>
    <a  href="javascript:void(0);" class="list-group-item aMenu" >上 传</a><br>
    <a  href="javascript:void(0);" class="list-group-item aMenu" >属 性</a><br>
</div>

CSS代码

<style type="text/css">
    div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #e5ebff; text-align: left;padding: 3px;}
    div#rMenu a{
        cursor: pointer;
        list-style: none outside none;
    }
    .aMenu {
        ont-size: medium;font-weight: bold;
    }
</style>
  • 这段css样式主要让div隐藏起来

Js代码

//显示右键菜单
function showRMenu(type, x, y) {
    $("#rMenu").show();
    $("#rMenu").css({"top":y+"px", "left":x+"px", "visibility":"visible"}); //设置右键菜单的位置、可见
    $("body").bind("mousedown", onBodyMouseDown);
}
//鼠标按下事件
function onBodyMouseDown(event){
    if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
        $("#rMenu").css({"visibility" : "hidden"});
    }
}
  • 设置菜单显示的位置,鼠标单击后菜单消失

End

css样式可能不是太好看,大家自己调吧,毕竟我不是前端。。