<!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. iconfont字体图标的使用方法（转）

    我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐, ...

  2. Ext.grid rowexpander的展开与收缩

    这里写Ext.grid.Panel的展开与收缩. 1. 确保在grid存在rowexpander对象: plugins: [{ ptype: 'rowexpander', rowBodyTpl: [' ...

  3. git版本控制系统小白教程（上）

    前言:本文主要介绍git版本控制系统的一些基础使用,适合小白入门,因为内容较多,会分为两部分进行分享. Git介绍 ​ Git是目前世界上最先进的分布式版本控制系统.并且它是一个开源的分布式版本控制系 ...

  4. MyBatis框架——单表查询

    Mybatis单表查询,示例 1.创建数据库 /* Navicat MySQL Data Transfer Source Server : localhost Source Server Versio ...

  5. Error 不再支持源选项 5。请使用 6 或更高版本。

    解决方案:在项目pom.xml中指定JDK版本 我的jdk版本是11.0.2 所以写的是11 根据你自己的jdk版本写 1.7/1.8~~~~ <properties>元素时根元素< ...

  6. bzoj4693

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

  7. Netty：初识Netty

    前文总结了NIO的内容,有了NIO的一些基础之后,我们就可以来看下Netty.Netty是Java领域的高性能网络传输框架,RPC的技术核心就是网络传输和序列化,所以Netty给予了RPC在网络传输领 ...

  8. GitHub也会断供：美国制裁地区帐号都受限，毫无预警，个人页面直接404

    请注意,GitHub也有断供危机. 如果你有GitHub私有库,是时候重新思考安全性,也是时候制定备份策略. 这不是杞人忧天,也不只温馨提示,而是已经发生的事实. 一位伊朗程序员,一觉醒来GitHub ...

  9. 上传到码云时遇到：Incorrect username or password ( access token )

    由于之前上传到 码云时候使用命令:git push -u origin master时出现如下bug Incorrect username or password ( access token ) 时 ...

  10. BP神经网络及异或实现

    BP神经网络是最简单的神经网络模型了,三层能够模拟非线性函数效果. 难点: 如何确定初始化参数? 如何确定隐含层节点数量? 迭代多少次?如何更快收敛? 如何获得全局最优解? ''' neural ne ...