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