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获取鼠标在浏览器客户区坐标属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容