首页 > 代码库 > jquery鼠标 左键-中键-右键 实现 单击-双击-拖拽-滚动 原型

jquery鼠标 左键-中键-右键 实现 单击-双击-拖拽-滚动 原型

javascript:
<script type="text/javascript" src="http://www.mamicode.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function () {
    var changeName = $("#result");
       
    // 滚动监听初始化
    // Mozilla的基于DOM的滚轮事件
    if (changeName[0].addEventListener) {       
        changeName[0].addEventListener("DOMMouseScroll", wheel, false);
    }
            
    // IE/Opera/Chrome等
    else if (changeName[0].attachEvent) {
        changeName[0].attachEvent("onmousewheel", wheel, false);
    }
       
    // 绑定单双击及移动屏蔽右键事件
    changeName.bind({
       
        // 屏蔽鼠标右键菜单
        contextmenu:function () { return false; },
       
        //
        mousedown:function (event) {
            // 鼠标点击的初始位置
            initPos.x = event.pageX;
            initPos.y = event.pageY;
                   
            // 鼠标点击时相对目标元素左上角的位置。
            relPos.x = initPos.x - $(this).offset().left;
            relPos.y = initPos.y - $(this).offset().top;
            move = true;
        },
       
        //
        mousemove: function (event) {
            if(move) {
                //目标元素新的坐标。
                movePos.x = event.pageX - relPos.x;
                movePos.y = event.pageY - relPos.y;
                       
                $("#result").css({ left: movePos.x + "px", top: movePos.y + "px" });
       
                mouseStatic = false;            
            }
        },
       
        // ie系列对mousedown支持不好,click无法获取点击左中右键参数,故使用mouseup
        mouseup:function(event) {
            if (mouseStatic) {
                mouseEvent();
                count[flag] = event.which;
                flag++;
            }
            else {
                mouseStatic = true;
            }   
            move = false;  
        }
    });
});
       
// 单位时间点击次数
var flag = 0;
       
// 鼠标静止
var mouseStatic = true;
       
// 移动状态
var move = false;
       
// 初始坐标,计算量及拖拽最后的位置坐标
var initPos = {x: 0, y: 0}, relPos = {x: 0, y: 0}, movePos = {x: 0, y: 0};
       
// 每次点击参数值,用以判断左中右键
var count = new Array();
       
// 利用setTimenout延迟以判断是单击或双击
function mouseEvent() {
    if(!flag) {setTimeout("clickTest();",280);}          
}
       
// 根据flag计数判断单双击,并调用相应函数
function clickTest() {
    flag==1? singleClick():dobuleClick();
    flag=0;
    count.length=0;
}
       
// 单击事件,1为左键,2为中键,3为右键
function singleClick() {
    switch (count[0]) {
        case 1:
            // alert("左");
            $("#result").empty().append("单击事件——左键单击<br>");
            break;
        case 2:
            // alert("中");
            $("#result").empty().append("单击事件——中键单击<br>");
            break;
        case 3:
            // alert("右");
            $("#result").empty().append("单击事件——右键单击<br>");
            break;
    }       
}
       
// 双击事件
function dobuleClick() {
    var dif = true;
    for (var i = 0; i < count.length-1; i++) {
       
        // 判断是否存在相邻两次点击参数相同,即同一鼠标按键连续两次点击
        if (count[i]==count[i+1]) {
       
            // 判断鼠标双击按键,1为左键双击,2为中键双击,3为右键双击
            switch (count[i]) {
                case 1:
                    // alert("2左");
                    $("#result").empty().append("双击事件——左键双击<br>");
                    break;
                case 2:
                    // alert("2中");
                    $("#result").empty().append("双击事件——中键双击<br>");
                    break;
                case 3:
                    // alert("2右");
                    $("#result").empty().append("双击事件——右键双击<br>");
                    break;
            }
            dif = false;
            return;
        }
    }
       
    // 如果双击不存在,判断最后一次按键,1为左键单击,2为中键单击,3为右键单击
    if (dif) {
        switch (count[count.length-1]) {
            case 1:
                // alert("1左");
                $("#result").empty().append("双击事件——左键单击<br>");
                break;
            case 2:
                // alert("1中");
                $("#result").empty().append("双击事件——中键单击<br>");
                break;
            case 3:
                // alert("1右");
                $("#result").empty().append("双击事件——右键单击<br>");
                break;
        }
    }
}
       
// 滚动方向测试
function handle(delta) {
    if (delta < 0) {
        // alert("向下滚动");
        $("#result").empty().append("滚动事件——向下滚<br>");
    }   
    else {
        // alert("向上滚动");
        $("#result").empty().append("滚动事件——向上滚<br>");
    }       
}
       
// 滚动事件
function wheel(event){
    var delta = 0;
       
    // IE兼容
    // if (!event) {
    //  event = window.event;
    // }
    event = event || window.event
           
    // IE/Opera/Chrom使用wheelDelta获取,值为±120
    // if (event.wheelDelta) {  
    //  delta = event.wheelDelta/120;           
    // }
    // // Mozilla使用detail获取,值为±3,方向与ie相反
    // else if (event.detail) {
    //  delta = -event.detail/3;
    // }
       
    delta = event.wheelDelta || -event.detail;
       
    // 如果增量不等于0,即产生滚动,测试滚轮向上滚或者是向下
    if (delta) {handle(delta);}
       
    // 屏蔽滚轮默认事件
    if (event.preventDefault) {event.preventDefault();}
    event.returnValue = http://www.mamicode.com/false;
}   
</script>
css:
<style type="text/css">
#result {
    width: 500px;
    height: 500px;
    background: gray;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}
</style>
html:
<div id="result"></div>

目前有个缺陷: 当页面出现滚动条时,中键单击默认可以拖拽网页的功能还未能屏蔽。哪位知道希望能告诉我。呵呵~~ 

 下载地址

jquery鼠标 左键-中键-右键 实现 单击-双击-拖拽-滚动 原型