1.(兼容)Js获取鼠标位置的坐标
1 function mouseMove(ev) 2 { 3 ev= ev || window.event; 4 var mousePos = mouseCoords(ev); 5 //alert(ev.pageX); 6 document.getElementById("xxx").value = mousePos.x; 7 document.getElementById("yyy").value = mousePos.y; 8 } 9 function mouseCoords(ev) 10 { 11 if(ev.pageX || ev.pageY){ 12 return {x:ev.pageX, y:ev.pageY}; 13 } 14 return { 15 x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 16 y:ev.clientY + document.body.scrollTop - document.body.clientTop 17 }; 18 }
document.onmousemove = mouseMove;
2.(兼容)获取鼠标点击的元素 测试兼容IE6-8/FF
1 function getClickedHtml(event) { 2 var eve = event || window.event; 3 try { 4 var obj = document.elementFromPoint(eve.clientX, eve.clientY); 5 } catch (e) { 6 alert("浏览器不支持"); 7 } 8 if (obj) alert(obj.innerHTML); 9 else { alert("无法获取"); } 10 }
3.JQuery按键
Jquery对Event做了标准化,可以放心使用。
* target 这个反应触发事件的DOM对象,可以在事件冒泡的时候判断是否是事件源头(compare event.target to this)
* pageX: 鼠标的left属性,相对于page
* pageY: 鼠标的top属性,相对于page
* preventDefault(): 这个方法被调用,则原有事件就被忽略。(例如 clicked link就不会去新的Url了)
* stopPropagation():让Jquery停止事件冒泡
* Data: 如果事件中还有EventData你就可以用这个属性获得对应Eventdata数据了。
* ctrlKey: 类型: Boolean, 说明: Ctrl 键是否按下
* shiftKey: 类型: Boolean, 说明: Shift键是否按下
* altKey: 类型: Boolean, 说明: Alt 键是否按下
* charCode: 类型: Number, 说明: 最后响应键盘按键的 charCode 值
* keyCode: 类型: Number, 说明: 最后响应键盘按键的 keyCode 值
* button: 类型: Number, 说明: 按下的鼠标键, 左键:1, 右键:2, 中键:4
* which: 类型: Number, 说明: 最后响应的是哪个按键, 如果是键盘按键则等于 charCode || keyCode; 如果是鼠标按键, 左键:1, 右键:3, 中键2
type : 事件类型
relatedTarget:对于鼠标事件, 标示触发事件时离开或者进入的DOM元素
$("a").mouseout(function(event) {
alert(event.relatedTarget);
});
currentTarget:冒泡前的当前触发事件的DOM对象, 等同于this.
result: 上一个事件处理函数返回的值
screenX/Y:对于鼠标事件, 获取事件相对于屏幕原点的水平/垂直坐标