我的第二个jquery插件——mouseForK13鼠标事件-优快云博客

本文介绍了一个基于jQuery的鼠标事件插件，支持多种鼠标操作，包括左中右键的单击、双击、拖拽及滚轮上下滚动事件。通过简单的配置即可实现丰富的交互效果。

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

功能：

1. clickL —— 左键单击事件

2. clickM —— 中键单击事件

3. clickR —— 右键单击事件

4. click2L —— 左键双击事件

5. click2M —— 中键双击事件

6. click2R —— 右键双击事件

7. moveL —— 左键拖拽事件

8. moveM —— 中键拖拽事件

9. moveR —— 右键拖拽事件

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

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

示例：

页面引入：

使用方法：

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：

转载于:https://www.cnblogs.com/k13web/p/4139540.html