<!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. XMind ZEN 2020 (10.0.2) 全平台 完美破解版(ubuntu)

    XMind ZEN 2020 (10.0.2) 全平台 完美破解版(ubuntu) https://www.ghpym.com/xmindzen.html/comment-page-8?replyto ...

  2. 分布式——吞吐量巨强、Hbase的承载者 LSMT

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是分布式系统的第九篇文章. 今天给大家分享的内容是LSM树,它的英文是Log-structed Merge-tree.看着有些发怵,但其 ...

  3. mybatis3.2.7 原理和入门程序

    使用jdbc操作数据库有以下缺点   |--数据库连接,使用时就创建,不使用立即释放,对数据库进行频繁开启和关闭,造成数据源资源浪费,影响数据库性能.    设想:使用数据库连接池管理数据库连接.   ...

  4. hibernate连接oracle

    <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE hibernate-configuration PUBLIC           & ...

  5. java基础-对集合（Collection）的总结

    集合(Collection)类型也是Java标准库中被使用最多的类型. List ArrayList LinkedList 对于自定义的对象,需要正确覆写 equals方法 参看7.3 例子 Map ...

  6. P1361 小M的作物 【网络流】【最小割】

    题目描述 小M在MC里开辟了两块巨大的耕地A和B(你可以认为容量是无穷),现在,小P有n中作物的种子,每种作物的种子有1个(就是可以种一棵作物)(用1...n编号). 现在,第i种作物种植在A中种植可 ...

  7. Contest 152

    2019-09-01 20:59:55 总体感受:最近几次参加contest发现自己的水平还是严重的不够,尤其是在处理一些异常情况的时候,遇到TLE,MLE如何有效的进行Debug是需要去锻炼的. 注 ...

  8. Hive内外表的区分方法及内外部差异

    Hive内外部区分方法 查看hive元数据:进入mysql中hive元数据库,查看TBLS表,查看对应的表名和表类型: 在hive-cli界面:desc extended tablename,查看Ta ...

  9. Building Applications with Force.com and VisualForce(Dev401)(十四):Implementing Business Processes:Auditing Processes

    Dev401-015:Implementing Business Processes:Auditing Processes Module Objectives1.list some of the fe ...

  10. redis吊锤面试官，这篇足够了！

    原理篇 redis 时单线程的为什么还能那么快? 数据都在内存中,运算都是内存级别的运算. redis既然是单线程的为什么能处理那么多的并发数? 多路复用,操作系统时间轮训epoll 函数作为选择器, ...