Javascript | MouseEvent ctrlKey 属性

• 简介
• 语法
• 示例
• 属性值
• 浏览器支持

简介

ctrlKey 属性是 MouseEvent 接口中的一个属性，用于表示事件是否在同时按下 Ctrl 键。

鼠标事件通常与 MouseEvent 相关，常常用于检测鼠标的位置和状态。通过检测 ctrlKey 属性，我们可以在鼠标点击事件中检测是否同时按下了 Ctrl 键。

语法

MouseEvent.ctrlKey

示例

<button id="myButton">点击我</button>
<script>
    document.querySelector("#myButton").addEventListener("click", function(event) {
        if (event.ctrlKey) {
            console.log("同时按下了 Ctrl 键");
        } else {
            console.log("未按下 Ctrl 键");
        }
    });
</script>

在以上示例中，我们监听了按钮的点击事件，并在事件回调函数中通过 event.ctrlKey 属性来判断是否同时按下了 Ctrl 键。

属性值

ctrlKey 属性是一个只读属性，类型为布尔值。如下所示：

• true : 如果同时按下了 Ctrl 键，ctrlKey 属性的值为 true；
• false : 如果没有按下 Ctrl 键，ctrlKey 属性的值为 false。

浏览器支持

MouseEvent.ctrlKey 属性支持所有主流浏览器，例如：

• Chrome
• Firefox
• Safari
• IE
• Edge
• Opera

但是，我们还是应该在代码中加入兼容性处理，避免因为浏览器不支持而导致代码出错。