.mousedown()

类别：事件 > 鼠标事件

.mousedown( handler )返回类型：jQuery

描述：把事件处理函数绑定到“mousedown”JavaScript事件，或者在一个元素上触发事件。

此方法在第一个版本中是.on( "mousedown", handler)的简写，在第二个版本中是.trigger( "mousedown" )的简写。

当鼠标指针在元素上时，mousedown事件

例如：考虑以下HTML：

1
2
3
4
5
6
 
<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>
插图 1 - 呈现的HTML的演示

事件处理函数可被绑定到任何<div>：

1
2
3
 
$( "#target" ).mousedown(function() {
  alert( "Handler for .mousedown() called." );
});

现在如果我们在元素上点击，将显示警告框：

Handler for .mousedown() called.

我们还可以在点击别的元素时触发事件：

1
2
3
 
$( "#other" ).click(function() {
  $( "#target" ).mousedown();
});

在此代码执行之后，点击Trigger the handler也将显示警告消息。

当鼠标按钮被点击时，就发送mousedown事件。若要只发送到特定的按键，我们可以使用事件对象的which属性。并不是所有的浏览器支持此属性（Internet Explorer 使用按钮代替），但是jQuery规范化了此属性，所以它可以在所有浏览器中安全使用。which的值，对于鼠标左键是1，对于鼠标中键是2，对于鼠标右键是3。

此事件主要用于确保主按钮被用于开始一个拖曳操作；如果忽略了它，当用户尝试使用上下文菜单时，就会发生奇怪的事情。虽然可利用这些属性侦测中键和右键，但是这并不可靠。例如，在Opera和Safari中右键默认不可侦测。

如果用户点击一个元素，从它上面拖开，然后释放按键，这将依然计数为一次mousedown事件。在大多数用户界面中，这一系列操作会被视为按键按下的“撤销”，所以使用click事件通常更好，除非在特定的情形中，我们知道mousedown事件更合适。

补充说明：

  • 因为.mousedown()方法是.on( "mousedown", handler )的简写，所以可以使用.off( "mousedown" )来分离。

示例：

当触发mouseup事件和mousedown事件时显示文本。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mousedown demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Press mouse and release here.</p>
 
<script>
$( "p" )
  .mouseup(function() {
    $( this ).append( "<span style='color:#f00;'>Mouse up.</span>" );
  })
  .mousedown(function() {
    $( this ).append( "<span style='color:#00f;'>Mouse down.</span>" );
  });
</script>
 
</body>
</html>

演示：