我的第二个jquery插件——mouseForK13鼠标事件

 

       由于工作中遇到鼠标滚轮和拖拽的问题，jquery本身不支持滚动事件，而同一元素同时使用单击和双击事件，那么总会执行一次单击事件，所以在解决后脑袋一热，就想把鼠标的左中右键的单双击和拖拽以及滚轮事件封装成一个插件，方便以后使用。 下载

 

功能：

1. clickL —— 左键单击事件

2. clickM —— 中键单击事件

3. clickR —— 右键单击事件

 

4. click2L —— 左键双击事件

5. click2M —— 中键双击事件

6. click2R —— 右键双击事件

 

7. moveL —— 左键拖拽事件

8. moveM —— 中键拖拽事件

9. moveR —— 右键拖拽事件

 

10. wheelT —— 滚轮向上滚动事件

11. wheelB —— 滚轮向下滚动事件

 

示例：

页面引入：

    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="mouseForK13.min.js"></script>

 

使用方法：

javascript：

    $(function () {
        $("#result").mouseForK13({
            clickL:function () {
                $("#result").empty().append("左键单击");
            },

            moveL: function (x,y) {
                $("#result").css({left: x + "px", top: y + "px"}).empty().append("左键拖拽 X:" + x +" Y:" + y);
            }

        });
    })

注：

clickL:function () { 内部不可直接使用$(this)，可以使用$选择，如$("#result")，在此之后的jq方法函数中可以使用$(this) }

moveL: function (x,y) { x为拖拽时鼠标水平移动距离，y为垂直移动距离 }

 

css：

#result {
        width: 200px;
        height: 100px;
        line-height: 100px;
        background: gray;
        color: #fff;
        position: absolute;
        text-align: center;
        top: 50px;
        left: 50px;
        cursor: pointer;
    }

 

html：

<div id="result"></div>