Đỉnh NGUYỄN

life's a journey not a destination

jQuery: Bắt sự kiện double click trên thẻ div

Leave a comment


Đây là ví dụ đơn giản minh họa bắt sự kiện double click trên thẻ DIV. jQuery có nhiều hàm sự kiện liên quan đến dùng mouse mà bạn có thể dùng.

Trong ví dụ, chúng ta sẽ chuyển đổI (toggle) màu và kích thước khung viền của thẻ DIV khi nó được double click.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Detect Double Click</title>
    <style type="text/css">
        div {
            border: 1px solid black;
            height: 100px;
            width: 100px;
        }
        .alt {
            border: 4px solid red;
        }
    </style>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#divOne').dblclick(function () {
                $(this).toggleClass('alt');
            });
        });
    </script>
</head>
<body>
    <div id="divOne">
        Please, double click me!
    </div>
</body>
</html>

Như bạn thấy, chúng ta dùng hàm toggleClass để thay đổi CSS class của thẻ DIV khi người dùng double click. Để bắt được sự kiện double click, dùng hàm sự kiện dựng sẵn trong jQuery: dblclick(). Làm theo cách tương tự bạn có thể bắt sự kiện trên bất kỳ thành phần HTML nào mình muốn (như textbox, button, span, a,…).

Advertisements

Author: dinhnn

Senior software developer, a technical leader. You can be reached at via email to dinhnguyenngoc@gmail.com, via my blog at dinhnguyenngoc.wordpress.com, and on Twitter @dinhnguyenngoc.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s