MouseEvent
接口指用户与指针设备( 如鼠标 )交互时发生的事件。使用此接口的常见事件包括:click
,dblclick
,mouseup
,mousedown
。
MouseEvent
派生自 UIEvent
,UIEvent
派生自 Event
。虽然 MouseEvent.initMouseEvent()
方法保持向后兼容性,但是应该使用 MouseEvent()
构造函数创建一个 MouseEvent
对象。
一些具体的事件都派生自 MouseEvent
:WheelEvent
和DragEvent
。
构造函数
MouseEvent()
- 生成一个新的MouseEvent对象
属性
这个接口也继承了UIEvent
和 Event
原型上的方法,
MouseEvent.altKey
只读- 当鼠标事件触发的时,如果alt 键被按下,返回true;
MouseEvent.button
只读- 当鼠标事件触发的时,如果鼠标按钮被按下(如果有的话),将会返回一个数值。
MouseEvent.buttons
只读-
当鼠标事件触发的时,如果多个鼠标按钮被按下(如果有的话),将会返回一个或者多个代表鼠标按钮的数字。
MouseEvent.clientX
只读- 鼠标指针在点击元素(DOM)中的X坐标。
MouseEvent.clientY
只读- 鼠标指针在点击元素(DOM)中的Y坐标。
MouseEvent.ctrlKey
只读- 当鼠标事件触发时,如果 control 键被按下,则返回 true;
MouseEvent.metaKey
只读- 当鼠标事件触发时,如果 meta键被按下,则返回 true;
MouseEvent.movementX
只读- 鼠标指针相对于最后
mousemove
事件位置的X坐标。 MouseEvent.movementY
只读- 鼠标指针相对于最后
mousemove
事件位置的Y坐标。
MouseEvent.offsetX
只读- 鼠标指针相对于目标节点内边位置的X坐标
MouseEvent.offsetY
只读- 鼠标指针相对于目标节点内边位置的Y坐标
MouseEvent.pageX
只读- 鼠标指针相对于整个文档的X坐标;
MouseEvent.pageY
只读- 鼠标指针相对于整个文档的Y坐标;
MouseEvent.region
只读- 返回被点击事件影响的点击区域的id,如果没有区域被影响则返回null。
MouseEvent.relatedTarget
只读-
鼠标事件的次要目标(如果有的话)
MouseEvent.screenX
只读- 鼠标指针相对于全局(屏幕)的X坐标;
MouseEvent.screenY
只读- 鼠标指针相对于全局(屏幕)的Y坐标;
MouseEvent.shiftKey
只读- 当鼠标事件触发时,如果 shift 键被按下,则返回 true;
MouseEvent.which
只读- 当鼠标事件触发时,表示被按下的按钮。
MouseEvent.mozPressure
只读- 点击事件发生时施加在触摸屏或者平板设备的压力量。这个数值在0.0(最小压力)和1.0(最大压力)之间。
MouseEvent.mozInputSource
只读- 生成事件的类型(若干
MOZ_SOURCE_*
常量如下列出)。可通过该属性获知鼠标事件是否由真实鼠标设备触发,亦或通过触摸事件触发(这可能影响处理坐标事件时的精确程度)。 MouseEvent.webkitForce
只读- 点击时施加的压力量。
MouseEvent.x
只读MouseEvent.clientX
的别名。MouseEvent.y
只读-
MouseEvent.clientY
的别名。
常量
MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN
只读- 正常点击所需的最小力量
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN
只读- 强制点击所需的最小力量
方法
MouseEvent.getModifierState()
- 返回指定修饰键的当前状态。请参照
KeyboardEvent.getModifierState
() 查看详情。 MouseEvent.initMouseEvent()
- 初始化创建MouseEvent的值。如果这个事件已经被分派,这个方法将不会做任何事情。
示例
这个例子演示了使用DOM方法在复选框上模拟一个点击事件(使用编程的方式生成点击事件)。
function simulateClick() {
var evt = new MouseEvent("click", {
bubbles: true,
cancelable: true,
view: window,
});
var cb = document.getElementById("checkbox"); //element to click on
var canceled = !cb.dispatchEvent(evt);
if(canceled) {
// A handler called preventDefault
alert("canceled");
} else {
// None of the handlers called preventDefault
alert("not canceled");
}
}
document.getElementById("button").addEventListener('click', simulateClick);
<p><label><input type="checkbox" id="checkbox"> Checked</label>
<p><button id="button">Click me</button>
点击按钮查看演示:
规范
Specification | Status | Comment |
---|---|---|
CSS Object Model (CSSOM) View Module MouseEvent |
Working Draft | Redefines MouseEvent from long to double. This means that a PointerEvent whose pointerType is mouse will be a double. |
Pointer Lock MouseEvent |
Candidate Recommendation | From Document Object Model (DOM) Level 3 Events Specification, added movementX and movementY properties. |
CSS Object Model (CSSOM) View Module MouseEvent |
Working Draft | From Document Object Model (DOM) Level 3 Events Specification, added offsetX and offsetY , pageX and pageY , x, and y properties. Redefined screen, page, client and coordinate (x and y) properties as double from long . |
Document Object Model (DOM) Level 3 Events Specification MouseEvent |
Obsolete | From Document Object Model (DOM) Level 2 Events Specification, added the MouseEvent() constructor, the getModifierState() method and the buttons property. |
Document Object Model (DOM) Level 2 Events Specification MouseEvent |
Obsolete | Initial definition. |
浏览器兼容性
BCD tables only load in the browser
参考
- 它的直接父级,
UIEvent
.