返回值:jQuerymouseup(handler(eventObject))

为 JavaScript 的 "mouseup" 事件绑定一个处理函数,或者触发元素上的该事件。

带有参数的该方法是 .bind('mouseup', handler) 的快捷方式 variation, and .trigger('mouseup') in the second.

当鼠标指针正处在某元素上,并且在该元素上松开了鼠标,就会触发 mouseup 事件。任何 HTML 元素都可以接收该事件。

举例来说,请看下面的HTML:

<div id="target">
  Click here
</div>
<div id="other">
  Trigger the handler
</div>

该事件可以绑定在任何 <div> 上:

$('#target').mouseup(function() {
  alert('Handler for .mouseup() called.');
});

现在,当你在元素上点击了鼠标,就会显示如下的提示框:

Handler for .mouseup() called.

我们也可以通过点击其它元素,手动触发另一个元素上的该事件:

$('#other').click(function() {
  $('#target').mouseup();
});

在代码执行后,如果你点击 Trigger the handler 将同样会弹出上面的消息。

如果用户在某元素外按下了鼠标,并且将鼠标指针移入到该元素上,此时再松开鼠标时,同样会触发 mouseup 事件。但是,这一系列操作对于大多数界面设计而言,并不作为 click 事件来看待。除非在特殊情况下,我们真正关注的是 mouseup 事件。

示例:

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

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.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>

演示: