如何使用js鼠标 js怎么设置鼠标位置
一、js怎么编写鼠标的右击**
js右击**
先贴代码：
注意的两个点是：
①：先取消默认右击**,event.preventDefault();
②：判断event.Button:0:左键，1：滚轮，2：右键。
值得一说的的是"oncontextmenu"是指右键按下时的作用。
再给一个应用吧：
右击div显示出自己定义的菜单，点击除了div的地方，是默认的右击**。
代码：
效果自行查看吧，其实也没啥。
原理是，右键的菜单其实是一个隐藏的div,当点击父类div的时候，它出现而已。（貌似这样一说显得这个程序好垃圾啊，_(___)_其实这也是大厦的一块砖，少了它，大厦会塌的）
再给了类似的应用吧,一个点击div消失的效果。
二、js怎么设置鼠标位置
在前段使用JavaScript开发获取鼠标当前位置来计某个功能，如何获取鼠标当前的位置，其实很多人都不知道怎么做，为此我为大家整理推荐了相关的知识，希望大家喜欢。
js设置鼠标位置的方法新建一个html代码页面，在这个html页面找到<body>,然后在这个<body>里创建一个用来显示坐标位置的<div>,并给这个<div>添加一个id。如图
创建<div>的代码：
<div id="point-loc"></div>
使用pageX、pageY获取鼠标当前位置。在<title>标签后面新建一个<script>，创建鼠标移动时获取鼠标当前的位置。如图：
js代码：
<script type="text/javascript">
document.onmousemove= function(e){
var loc="当前位置 x:"+e.pageX+",y:"+e.pageY
document.getElementById("point-loc").innerHTML= loc;
}
</script>
保存html后使用浏览器打开即可看到效果。如图：
4页面所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js获取鼠标位置</title>
<script type="text/javascript">
document.onmousemove= function(e){
var loc="当前位置 x:"+e.pageX+",y:"+e.pageY
document.getElementById("point-loc").innerHTML= loc;
}
</script>
</head>
<body>
<div id="point-loc"></div>
</body>
三、js 判断当前鼠标在哪个元素上
可以按以下思路步骤来实现：
1、声明一个变量（如el），用来存放鼠标所在的元素节点。
2、在body元素上增加一个鼠标**监听
3、使用**对象中的target属性，每当鼠标经过一个元素时，就把它赋值给el变量
任何时候，读取el变量的值即为鼠标当前所在的元素。
示例代码：
varel=window.document.body;//声明一个变量，默认值为body
window.document.body.onmouseover=function(event){
el=event.target;//鼠标每经过一个元素，就把该元素赋值给变量el
console.log('当前鼠标在',el,'元素上');//在控制台中打印该变量
}
四、html,js如何获取当前鼠标位置
关于js鼠标**综合各大浏览器能获取到坐标的属性总共以下五种
event.clientX/Y
event.pageX/Y
event.offsetX/Y
event.layerX/Y
event.screenX/Y
clientX/Y:clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变
兼容性：所有浏览器均支持
pageX/Y:pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变
设置<body style="width:2000px;height:200px;">让页面滚动，发现clientX与pageX的值不一样
兼容性：除IE6/7/8不支持外，其余浏览器均支持
offsetX/Y:offsetX/Y获取到是触发点相对被触发dom的左上角距离，不过左上角基准点在不同浏览器中有区别，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。
兼容性：IE所有版本，chrome，Safari均完美支持，Firefox不支持
layerX/Y:layerX/Y获取到的是触发点相对被触发dom左上角的距离，数值与offsetX/Y相同，这个变量就是firefox用来替代offsetX/Y的，基准点为边框左上角，但是有个条件就是，被触发的dom需要设置为position:relative或者position:absolute，否则会返回相对html文档区域左上角的距离
兼容性：IE6/7/8不支持，opera不支持，IE9/10和Chrome、Safari均支持
screenX/Y:screenX/Y获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变
兼容性：所有浏览器均支持
示例：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
#wrap{
margin:30pxauto;
width:500px;
height:200px;
border:1pxsolid#ccc;
text-align:center;
overflow:scroll;
}
#wrapp{
display:block;
height:400px;
}
</style>
</head>
<bodystyle="height:2000px;width:20000px">
<divid="wrap">
<p></p>
</div>
<script>
window.onload=function(){//页面加载
varoDiv=document.getElementById('wrap');//获取元素
oDiv.onmousemove=function(e){//绑定鼠标的滑动**
e=e||window.event;
console.log('e.clientX:'+e.clientX);//输出x坐标
console.log('e.pageX:'+e.pageX);//输出x坐标
console.log('e.clientY:'+e.clientY);//输出y坐标
console.log('e.pageY:'+e.pageY);//输出y坐标
}
}
</script>
</body>
</html>
