jQuery 事件 mouseup() 方法

jQuery 事件mouseup() 方法用於將處理程式（函式）繫結到 mouseup 事件，或在選定元素上觸發該事件。

當滑鼠按鈕在選定元素上釋放時觸發。通常，此方法與mousedown() 方法結合使用以處理滑鼠操作。

語法

以下是 jQuery 事件mouseup() 方法的語法：

$(selector).mouseup(function)

引數

此方法接受一個可選引數作為函式，如下所述：

function (可選) - 當觸發 mouseup 事件時執行的可選函式。

返回值

此方法沒有任何返回值。

示例 1

以下程式演示了 jQuery 事件mouseup() 方法的使用：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    div{
        background-color: rgb(49, 157, 65);
        color: white;
        padding: 10px;
    }
</style>
</head>
<body>
    <div>Press and release the mouse button over me..!</div>
    <script>
        $('div').mouseup(function(){
            alert("Mouse button released...!");
        });
    </script>
</body>
</html>

輸出

以下程式在使用者按下並釋放滑鼠按鈕在選定元素上時顯示一條訊息，瀏覽器螢幕上將出現一個警報彈出視窗：

當用戶在選定元素上釋放滑鼠按鈕時：

示例 2

以下是 jQuery 事件mouseup() 方法的另一個示例。我們使用此方法來觸發特定按鈕的 mouseup 事件：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    span{
        color: rgb(78, 78, 157);
        font-size: 20px;
    }
    button{
        width: 100px;
        padding: 10px;
    }
</style>
</head>
<body>
    <p>Click and released mouse button on the below displayed button..</p>
    <button>Click me!</button>
    <span></span>
    <script>
        $('button').mouseup(function(){
            $('span').text("Mouse button released...!");
        });
    </script>
</body>
</html>

輸出

執行程式後，將出現一個按鈕。當按下並釋放按鈕時，按鈕旁邊將顯示一條淺藍色訊息：

當用戶按下並釋放滑鼠按鈕在顯示的按鈕上時：

示例 3

使用mouseup() 方法更改表單輸入欄位的背景顏色：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    input{
        width: 200px;
        padding: 10px;
    }
    button{
        padding: 10px;
    }
</style>
</head>
<body>
    <p>Click on the below form input fields to change the different background</p>
   <form>
    <input type="text" placeholder="Username" id="uname">
    <input type="password" placeholder="Password" id = 'psw'>
    <button>Login</button>
   </form>
    <script>
        $('input').mouseup(function(){
            $(this).css("background-color", "lightblue");
        });
    </script>
</body>
</html>

輸出

執行上述程式後，將顯示一個包含兩個輸入欄位和一個按鈕的表單。當用戶單擊並在輸入欄位上釋放滑鼠按鈕時，背景顏色將更改為“淺藍色”：

當用戶在輸入欄位上釋放滑鼠按鈕時：

示例 4

讓我們結合mousedown 和mouseup 事件來處理滑鼠操作：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>

</style>
</head>
<body>
    <p>Press and release the mouse button over the displayed textarea field</p>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <span></span>
    <script>
        $('textarea').mousedown(function(){
            $(this).css("background-color", "lightblue");
            $('span').text("Mouse button pressed down");
        }).mouseup(function(){
            $(this).css("background-color", "lightgreen");
            $('span').text("Mouse button released over the element")
        });
    </script>
</body>
</html>

輸出

請在下方找到上述程式的 GIF 輸出格式：

jquery_ref_events.htm

列印頁面