<!DOCTYPE html>

<HTML>

<HEAD>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>

    <link rel="stylesheet" href="bower_components/ztree/css/zTreeStyle/demo.css" type="text/css">

    <link rel="stylesheet" href="bower_components/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">

    <script type="text/javascript" src="bower_components/ztree/js/jquery-1.4.4.min.js"></script>

    <script type="text/javascript" src="bower_components/ztree/js/jquery.ztree.core-3.5.js"></script>

    <SCRIPT type="text/javascript">

        var setting = {

            data: {

                simpleData: {

                    enable: true

                }

            },

            callback:{

                beforeMouseDown: beforeMouseDown,                               //注册鼠标按下/抬起来/右键前/后的事件

                beforeMouseUp: beforeMouseUp,

                beforeRightClick: beforeRightClick,

                onMouseDown: onMouseDown,

                onMouseUp: onMouseUp,

                onRightClick: onRightClick

            }

        };

        var nodes =[

            { id:1, pId:0, name:"1", open:true},

            { id:11, pId:1, name:"111"},

            { id:12, pId:1, name:"222"},

            { id:13, pId:1, name:"333"},

        ];

        function beforeMouseDown(treeId, treeNode) {

            alert(treeNode.name + "   鼠标按下前");

            return false;                                                       //返回false,不调用按下后

        }

        function onMouseDown(event, treeId, treeNode) {

            alert(treeNode.name + "   鼠标按下后");

        }

        function beforeMouseUp(treeId, treeNode) {

            alert(treeNode.name + "   鼠标抬起来前");

            return true;                                                        //返回true,调用抬起来后

        }

        function onMouseUp(event, treeId, treeNode) {

            alert(treeNode.name + "   鼠标抬起来后");

        }

        function beforeRightClick(treeId, treeNode) {

            alert(treeNode.name + "   鼠标右键前");

            return true;

        }

        function onRightClick(event, treeId, treeNode) {

            alert(treeNode.name + "   鼠标右键后");

        }

        $(document).ready(function(){

            $.fn.zTree.init($("#sys"), setting, nodes);

        });

    </SCRIPT>

</HEAD>

<BODY>

<div class="content_wrap">

    <div class="zTreeDemoBackground left">

        <ul id="sys" class="ztree"></ul>

    </div>

</div>

</BODY>

</HTML>

javascript入门 之 ztree (八 一系列鼠标事件)的更多相关文章

  1. javascript入门 之 ztree (十 checkbox选中事件)

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeCheck / onCheck< ...

  2. javascript入门 之 ztree (六 结点的点击和展开/折叠事件)

    1.注意: 测试点击事件时,如果要测试取消选中和追加选中,如果按住ctrl和win键无用,则需要先用鼠标左键按住,然后,在松开左键的前几毫秒按住ctrl键便可! <!DOCTYPE html&g ...

  3. javascript入门 之 zTree（十二 托拽事件（二））

    1.逻辑可能有不完善的地方,如果发现,请指出. <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - d ...

  4. javascript入门 之 zTree（十一 托拽事件（一））

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - drag & drop</TITLE ...

  5. javascript入门 之 zTree（十三 移动/复制事件）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - copyNode / moveNode</T ...

  6. javascript入门 之 zTree（十四 增删查改）（一）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - beforeEditName / beforeRe ...

  7. javascript入门 之 zTree（十四 增删查改）（二）

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...

  8. javascript入门 之 ztree (九 单/复选框问题)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

  9. javascript入门 之 ztree(七 结点的查询)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

随机推荐

  1. 为什么vue中的data用return返回呢？

    不使用return包裹的数据会在项目的全局可见,会造成变量污染:使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件. 当一个组件被定义, data 必须声明为返回一个初始数据对象的函 ...

  2. Cisco 综合配置（三）

    要求: 1.PC1 PC2使用DHCP,获取IP ,VLAN为10 和20,网关在Core Switch 2上2.DHCP和web server VLAN为100,网关在Core Switch 1上3 ...

  3. Symantec(赛门铁克）非受管检测

    为了查找局域网内没有安装赛门铁克客户端的IP,采用Symantec Endpoint Protect Manager 的非受管检测机制进行网段扫描. 非受管检测机制的原理是:每台电脑开机时都会向同网段 ...

  4. fastText 训练和使用

    2019-09-09 16:33:11 问题描述:fastText是如何进行文本分类的. 问题求解: fastText是一种Facebook AI Research在16年开源的一个文本分类器. 其特 ...

  5. 贪心-最大相容区间-Maximum Number of Events That Can Be Attended

    2020-02-16 16:24:19 问题描述: 问题求解: 看起来就像是sort + 贪心,但是具体如何做呢? 实际上本题是最大相容区间的变种题,在最大相容区间里,我们按照结束时间对interva ...

  6. bzoj4693

    题意 bzoj 做法 结论1:对于\((X_1,X_2,...,X_k)\),其为红的充要条件为:令\(Y_i=X_i-1\),\(\prod\limits_{k=1}^K {\sum\limits_ ...

  7. stm32CubeMx+TrueSTUDIO+uc/os-III移植开发（一）

    自从接触到stm32cubemx后,发现使用起来很方便,用来做项目开发的话,由于是图形化操作界面,工作效率比较快.如果要学习操作系统,以前的IDE如keil,IAR等IDE对操作系统的代码调试起来不够 ...

  8. 深度强化学习（DRL）专栏开篇

    2015年,DeepMind团队在Nature杂志上发表了一篇文章名为"Human-level control through deep reinforcement learning&quo ...

  9. 使用 keras 和 tfjs 构建血细胞分类模型

    欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习.深度学习的知识!

  10. 一篇漫画故事带你理解透HTTPS（下）

    上下集知识点总结: 前情提要: 蝙蝠纪元,疫情之下.二丫欲访问京东购物,不料弹出安全提示,遂找二毛一探究竟.二毛一顿排查后,开始用通俗易懂的语言深入浅出的向二丫解释 HTTP作用及优缺点.HTTPS的 ...