您所在的位置:小祥子 » 编程 » JavaScript » 正文

获取鼠标在网页上的位置以及右击事件

时间:2015-05-22 编辑:闻杰 来源:本站整理

JS写法
document.getElementById("youji").oncontextmenu=youjiEvent;//指定这个元素 给他绑定右击事件
function youjiEvent(){//鼠标右击时显示菜单
  alert(item.name);
  return false;//屏蔽网页本身的右击效果
}

jquery写法
$(function(){
$('#youji').mousedown(function(e){
if(e.which==1){
alert("这是左击事件");

}else if(e.which == 2){
alert("这是中击事件");
}else{
alert("这是右击事件");
return false;//屏蔽不掉网页本身的右击事件
}
});
})

//鼠标右击的区域
<div id="youji" style="width:200px; height:200px; background-color:#1621E5"></div>


获取到鼠标在页面上点击时的xy坐标
js写法
var x,y;
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
x = mousePos.x;
y = mousePos.y;
}
document.onmousedown = mouseMove;

关键词:鼠标 网页