博客

jQuery event.which属性

  • Post category:jquery

jQuery event.which属性返回触发事件的按键或鼠标按钮的数字代码。该属性通常用于检测特定的按键或鼠标按钮是否被按下。

以下是jQuery event.which属性的详细攻略：

语法

event.which

参数

无

示例1：检测按键

以下示例演示了如何使用jQuery event.which属性检测按键：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.which Property</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <input type="text" id="myInput">

  <script>
    $('#myInput').on('keydown', function(event) {
      if (event.which === 13) {
        alert('Enter key pressed');
      }
    });
  </script>
</body>
</html>

在上述示例中，我们创建了一个文本输入框，并在输入框上绑定了一个keydown事件。在事件处理程序中，我们使用jQuery event.which`属性检测了按下的按键是否是回车键（键码为13），如果是，则弹出一个提示框，显示“Enter key pressed”。

示例2：检测鼠标按钮

以下示例演示了如何使用jQuery event.which属性检测鼠标按钮：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery event.which Property</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    $('#myButton').on('mousedown', function(event) {
      if (event.which === 1) {
        alert('Left mouse button pressed');
      } else if (event.which === 2) {
        alert('Middle mouse button pressed');
      } else if (event.which === 3) {
        alert('Right mouse button pressed');
      }
    });
  </script>
</body>
</html>

在上述示例中，我们创建了一个按钮，并在按钮上绑定了一个mousedown事件。在事件处理程序中我们使用jQuery event.which属性检测了按下的鼠标按钮的数字代码，并弹出一个提示框，显示按下的鼠标按钮。

注意事项

  • jQuery event.which属性返回的数字代码与不同的浏览器和操作系统关，因此应该使用常量来代替数字代码，以确保跨浏览器和操作系统的兼容性。常用的常量包括event.which === 13代表回车键，event.which === 27代表ESC键，event.which === 37代表左箭头键，event.which === 38代表上箭头键，event.which === 39代表箭头键，event.which === 40代表下箭头键，event.which === 1代表左键，event.which === 2代表中键，event.which === 3`代表右键。
  • jQuery event.which属性只能在事件处理程序中使用。
Tags: