JS中event物件中的常見屬性
阿新 • • 發佈:2018-11-30
在事件函式中,其實是可以寫引數的,寫法:
<script> var btn = document.getElementById("btn"); btn.onclick = function (event) { var e = event || window.event; console.log(e.target); }; btn.onmouseover = function (event) { var e = event || window.event;//為了相容 console.log(e.target); } </script>
事件函式裡面有幾個常用的屬性,我們來看一下:
1.screenX\/screenY 是以螢幕為基準進行測量,即:當前元素距離螢幕的尺寸
2.pageX 和 pageY 是以當前文件(絕對定位)為基準,不適用於IE6-8;會計算滾動長度
3.clientX 和 clientY 是以當前可視區域為基準,類似於固定定位。會忽略滾動長度
它們常常和offset家族聯合使用來動態獲取滑鼠相對於盒子的位置(距離盒子邊框的距離):
<script> var box = document.getElementById("box"); box.onmousemove = function (event) { var e = event || window.event; var x = event.clientX - box.offsetLeft; var y = event.clientY - box.offsetTop; // console.log(x, y); box.innerText = '(x: ' + x +', y:' + y +')'; } </script>