<!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. 【原创】Java并发编程系列1：大纲

    [原创]Java并发编程系列1:大纲 一个人能力当中所蕴藏的潜能,远超过自己想象以外. 为什么要学习并发编程 随着现今互联网行业的迅猛发展,其业务复杂度.并发量也在不断增加,对程序的要求变得越来越高, ...

  2. 聊聊count(*)

    count(*) 的实现方式 MyISAM 引擎把一个表的总行数存在了磁盘上,因此执行 count(*) 的时候会直接返回这个数,效率很高 InnoDB 引擎就麻烦了,它执行 count(*) 的时候 ...

  3. android弱网络优化

    1 网络请求,使用更好的网络请求方式 flutter有3种请求方式,flutter自带的io下httpclient请求,使用dart原生的http请求,dio请求. flutter还可以通过调用and ...

  4. npm install --save，npm install --save-dev，npm install

    react npm install --save 与 npm install --save-dev 的区别以npm安装msbuild为例: nam install msbuild: 会把msbuild ...

  5. ico制作工具

    因为要满足不同尺寸的图标很多网站生成的ico都是单一尺寸的无法满足特殊要求因此推荐一个ICO制作工具 Axialis IconWorkshop 6.91 下载:https://www.axialis. ...

  6. Fiddler3 使用技巧

    1.Fiddler抓不到包怎么解决 (1)先确定是HTTP包抓不到还是HTTPS包抓不到.如果只是HTTPS包抓不到,说明是证书的问题,需要重新安装证书. (2)检查浏览器的HTTP代理设置是否正确, ...

  7. 大数据软件安装之HBase（NoSQL数据库）

    一.安装部署 1.Zookeeper正常部署 (见前篇博文大数据软件安装之ZooKeeper监控 ) [test@hadoop102 zookeeper-3.4.10]$ bin/zkServer.s ...

  8. 图数据库 Nebula Graph TTL 特性

    导读 身处在现在这个大数据时代,我们处理的数据量需以 TB.PB, 甚至 EB 来计算,怎么处理庞大的数据集是从事数据库领域人员的共同问题.解决这个问题的核心在于,数据库中存储的数据是否都是有效的.有 ...

  9. 强连通分量SCC 2-SAT

    强连通分量SCC 2-SAT 部分资料来自: 1.https://blog.csdn.net/whereisherofrom/article/details/79417926 2.https://ba ...

  10. 项目中用到了Redis分布式锁，了解一下背后的原理

    前言 以前在学校做小项目的时候,用到Redis,基本也只是用来当作缓存.现在博主在某金融平台实习,发现Redis在生产中并不只是当作缓存这么简单.在我接触到的项目中,Redis起到了一个分布式锁的作用 ...