javascript获取鼠标在浏览器客户区坐标
分类：实例代码
关于什么是浏览器客户区可以参阅浏览器客户区是指的浏览器哪一部分一章节。
下面分享一段代码实例，它实现了获取鼠标在浏览器客户区的坐标的效果。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
#mydiv {
margin:100px;
height:200px;
width:100px;
background:#ccc;
}
</style>
<script>
var EventUtil = {
addHandler:function(elem,type,handler){
if(elem.addEventListener){
elem.addEventListener(type,handler,false);
}else if(elem.attachEvent){
elem.attachEvent("on"+type,handler);
}else{
elem["on"+type]=handler;
}
},
removeHandler:function(elem,type,handler){
if(elem.removeEventListener){
elem.removeEventListener(type,handler,false);
}else if(elem.detachEvent){
elem.detachEvent("on"+type,handler);
}else{
elem["on"+type]=null;
}
},
getEvent:function(event){
return event?event:window.event;
},
getTarget:function(event){
return event.target||event.srcElement;
},
preventDefault:function(event){
if(event,preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
};
window.onload = function () {
var odiv = document.getElementById("mydiv");
EventUtil.addHandler(odiv, "click", function (event) {
event = EventUtil.getEvent(event);
this.innerHTML="坐标:" + event.clientX + "," + event.clientY;
});
}
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
由于click事件注册在div上，所以只有鼠标在div范围内是有效的。
javascript获取鼠标在浏览器客户区坐标，这样的场景在实际项目中还是用的比较多的，关于javascript获取鼠标在浏览器客户区坐标就介绍到这了。
javascript获取鼠标在浏览器客户区坐标属于前端实例代码，有关更多实例代码大家可以查看。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu