前端测试题:(解析)如果要获取鼠标在当前文档中的位置，可以使用下面哪些属性?

考核内容: 鼠标事件

题发散度: ★

试题难度: ★

解题:

JS在触发事件时，会自动生成event对象传入到事件函数中。可以通过传参或直接使用关键字.

element.onmouseover=function(e){
console.log(event===e)
}

常用api或属性

• target: 表示事件目标本身 event.target;
• currentTarget：当前冒泡标签; event.currentTarget
• clientX&clientY: 触发事件时，鼠标相对于浏览器的X,Y的坐标位置(不包含滚动条) event.clientX; event.clientY;
• pageX&pageY:触发事件时，鼠标相对于网页的X,Y的坐标位置(包含滚动条) event.pageX; event.pageY;
• offsetX&offsetY: 指触发事件时鼠标相对于事件标签左上角的坐标偏移量。 event.offsetX; event.offsetY;
• preventDefault(): 阻止标签的默认行为 event.preventDefault():
• stopPropagation()：阻止冒泡或捕获 event.stopPropagation();

一图以概之

总结:event事件中的属性:

• pageX返回触发鼠标事件时，鼠标指针相对于当前页面(文档)的水平坐标，
• pageY返回触发鼠标事件时，鼠标指针相对于当前页面(文档)的垂直坐标;
• screenX返回窗口/鼠标指针相对于屏幕的水平坐标,
• screenY返回窗口/鼠标指针相对于屏幕的垂直坐标;
• clientX返回触发鼠标事件时，鼠标指针相对于当前窗口的水平坐标,
• clientY返回触发鼠标事件时，鼠标指针相对于当前窗口的垂直坐标;
• offsetX返回鼠标指针相对于目标元素边缘位置的水平坐标,
• offsetY返回鼠标指针相对于目标元素边缘位置的垂直坐标。

在线测试:

答案：

A:pageX,pageY