个性化阅读
专注于IT技术分析

jQuery mouseup()

本文概述

mouseup()方法将事件处理函数添加到HTML元素。在HTML元素上按下鼠标按钮后释放鼠标左键, 便会执行此功能。

当你在选定元素上释放鼠标的按下按钮时, 将发生mouseup()事件。一旦发生mouseup()事件, 它就会执行附加有要运行的函数的mouseup()方法。

此事件通常与mousedown()事件一起使用。

句法:

$(selector).mouseup()

它触发选定元素的mouseup事件。

$(selector).mouseup(function)

它将一个功能添加到mouseup事件。

jQuery mouseup()事件的参数

参数 描述
Function 它是一个可选参数。当触发mouseup事件时, 它将自行执行。

jQuery mouseup()事件的示例

让我们以一个示例来演示jQuery mouseup()事件。

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("#h1").mouseup(function(){  
       $( "div" ).text( "Bye Bye... mouse up event triggered" ).show().fadeOut( 2000 ); 
    });  
});  
</script>  
</head>  
<body>  
<h1 id="h1">Enter this heading.</h1> 
<div></div> 
</body>  
</html>

立即测试

输出:

输入此标题。


jQuery mouseup()事件示例2

让我们看一下jQuery mouseup()事件的另一个示例。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("p").mousedown(function(){
        $("p").css("background-color", "pink");
    });
    $("p").mouseup(function(){
        $("p").css("background-color", "yellowgreen");
    });
});
</script>
</head>
<body>
<p>Press down and release the mouse left button over this div element</p>
</body>
</html>

立即测试

输出:

按下并在此div元素上释放鼠标左键

赞(0)
未经允许不得转载:srcmini » jQuery mouseup()

评论 抢沙发

评论前必须登录!