.mouseup()

Định nghĩa và sử dụng

.mouseup(): Ràng buộc một xử lý tới một sự kiện mouseup (nhả chuột), hoặc kích hoạt sự kiện mouseup lên một thành phần.

Cấu trúc

Đã được thêm vào từ phiên bản 1.0

$('input').mouseup();

.mouseup(function(){...})

$('input').mouseup(function(){
    alert('Bạn vừa click chuột');
});

.mouseup()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('img').mouseup(function(){
        $(this).css('border','5px solid green');
    });
    $('button').click(function(){
        $('img').mouseup()
    });
});
</script>
</head>

<body>
<img src="http://hocwebchuan.com/common/images/img_webstandard.gif" alt="HỌC WEB CHUẨN" />
<button>Click</button>
</body>
</html>

Hiển thị trình duyệt:

Khi click vào button, ta đã kích hoạt được giá trị mouseup vào <img />, giống như vừa click vào <img /> và nhả chuột ra.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery
<img src="images/img_webstandard.gif" alt="HỌC WEB CHUẨN" /> <button>Click</button>	<img style="border: 5px solid green;" src="images/img_webstandard.gif" alt="HỌC WEB CHUẨN" /> <button>Click</button> <button>Click</button>

.mouseup(function(){...})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('img').mouseup(function(){
        $(this).css('border','5px solid green');
    });
});
</script>
</head>

<body>
<img src="http://hocwebchuan.com/common/images/img_webstandard.gif" alt="HỌC WEB CHUẨN" />
</body>
</html>

Hiển thị trình duyệt:

Khi click vào <img /> ta sẽ thấy được kết qủa.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery	Sau khi có jQuery
<img src="images/img_webstandard.gif" alt="HỌC WEB CHUẨN" />	<img style="border: 5px solid green;" src="images/img_webstandard.gif" alt="HỌC WEB CHUẨN" />

Ví dụ kết hợp mousedown và mouseup

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
     $("p").mouseup(function(){
          $(this).append('<span style="color:#f00;">Mouse up.</span>');
     }).mousedown(function(){
          $(this).append('<span style="color:#00f;">Mouse down.</span>');
     });
});
</script>
</head>

<body>
<p>Click vào đây và nhả chuột ra để xem kết quả.</p>
</body>
</html>

Hiển thị trình duyệt:

.mouseover()

.next()