javascript獲取滑鼠在瀏覽器客戶區座標

admin發表於2017-04-12
JavaScript瀏覽器

關於什麼是瀏覽器客戶區可以參閱瀏覽器客戶區是指的瀏覽器哪一部分一章節。

下面分享一段程式碼例項，它實現了獲取滑鼠在瀏覽器客戶區的座標的效果。

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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範圍內是有效的。

相關文章