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

javascript:
<script type="text/javascript" src="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 = 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>

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

下载地址

时间: 2024-10-07 19:26:20

jquery鼠标 左键-中键-右键 实现 单击-双击-拖拽-滚动 原型的相关文章

jquery判断点击鼠标左、中、右键事件

注:1为鼠标左键.2为鼠标中键.3为鼠标右键$('#btn').mousedown(function(e){           if(3 == e.which){                alert('右键单击事件');           }else if(1 == e.which){                    alert('左键单击事件');               }         })

jQuery内容横向拖拽滚动

如果有业务需求:使用横向滚动,而又不想用滚动条,可以使用横向拖拽滚动,主要是利用元素的scrollLeft特性: 废话不多说直接上代码: css: .box{ width:100%; height:30px; line-height:30px; overflow:hidden; } .box-container{ cursor: move; white-space:nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-use

jQuery插件之路(三)——文件上传(支持拖拽上传)

好了,这次咱一改往日的作风,就不多说废话了,哈哈.先贴上源代码地址,点击获取.然后直接进入主题啦,当然,如果你觉得我有哪里写的不对或者欠妥的地方,欢迎留言指出.在附上一些代码之前,我们还是先来了解下,上传文件的时候需要利用的一些必要的知识. 首先我们要说的就是FileReader对象,这是一个HTML5提出的,专门用来异步的读取用户计算机上文件的对象,这里有详细的介绍.所以如果我们想要使用它,那么首先我们得先创建一个FileReader对象. var fr = new FileReader()

HTML5中的对象的拖拽

拖拽: draggable="true"页面上就能实现拖拽事件: ondragstart 拖拽开始事件 ondrag 拖拽中 ondragend 拖拽结束事件 投放区事件: ondragenter 进入投放区 ondragover 投放区移动 ondragleave 离开投放区 ondrop 投放区投放 例文: <head> <meta charset="UTF-8"> <title></title> <styl

C#中实现控件拖拽效果(How to DragDrop Control in C#)

当产品间需要交互实现数据传递,或产品需要从外部导入文件时,通过控件拖拽来实现是个不错的选择.在UI上支持控件拖拽,可极大提升用户体验.拖拽本身并不神秘,它的本质实际是一个数据交换的过程.控件接受从其他地方来的数据,并进行处理.数据交换有多种方法,Windows中剪贴板可能就是用的最多,但最不被注意的一种方法.下面介绍用C#实现控件拖拽,并通过剪切板交换数据. 对于拖拽的对象,需要在MouseDown或ItemDrag中调用DoDragDrop,传递要拖拽的数据对象并触发拖拽.总的来说,当用户调用

Vue的v-for中列表项拖拽排序详细方法

首先:HTML中,关键点是监听拖拽的三个阶段,即:dragstart/dragover/dragend,注意:要拖拽元素必须加上draggable="true" <ul @dragstart="onDragStart" @dragover="onDragOver" @dragend="onDragEnd" ref="taskListUl"> <li v-for="(subTask

openlayers中实现点的拖拽(modify),在layer中增加修改删除point。

最近忙着整地图,都忘记了总结来沉淀自己,自我检讨一下. 总结一下最近使用openlayer时学习的内容,先说下我的业务逻辑吧,在室内地图中 1,点击新增在地图上新增一个可以拖拽的点,拖拽完成后确定位置,添加其他数据,保存入库. 2,增加后展示点,点上面有序号. 3,修改时,当选中一条记录的时候需要地图上面的点高亮,这个时候可拖动位置,修改表单数据,修改后保存. 4,删除也是选中一条记录,记录删除地图点删除. 由于基于老版本开发的,本文中用到的方法都是openlayer4.6.5版本,具体问题还是

jquery 鼠标右键事件、左键单击事件判定

$(function(){ $('a').mousedown(function(e){ alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键 return false;//阻止链接跳转 }) }) 如 : $('#as121').mousedown(function(e){           if(3 == e.which){                alert('这 是右键单击事件');                      }el

JS中鼠标左右键以及中键的事件

在三维场景中有时候需要判断鼠标的事件,除了使用的click事件,只有鼠标左键有效,而右键无效.而对于onmousedown.onmouseup的时候鼠标的事件左键/右键有效.详细请看w3c上的资料. 以下总结鼠标三个按键操作: 首先,需要为window绑定mousedown.mouseup事件 元素对象.addEventListener('mousedown', 处理函数fun);1然后,判断button的值,button 事件属性可返回一个整数,指示当事件被触发时哪个鼠标按键被点击. butt