06/04/2021, 14:49

Hàm dblclick() trong jQuery - JQuery API

Ví dụ RUN <form method='get'> <input type='text' name='your_name' id='your_name'/> <input type='button' value='Click 2 lần để hiển thị' id='showbtn'/> </form> <script> $(document).ready(function(){ ...

Tương tự như sự kiện click, dbclick là sự kiện khi bạn click vào đối tượng HTML. Nhưng có một điểm khác đó là bạn phải click 2 lần thì mới xảy ra sự kiện dblclick.

.dblclick( handler )

Cách này chỉ có một tham số là handler, đây là môt hàm sẽ được gọi khi xảy ra sự kiện click.

Ví dụ RUN
<form method='get'>
    <input type='text' name='your_name' id='your_name'/>
    <input type='button' value='Click 2 lần để hiển thị' id='showbtn'/>
</form>
<script>
    $(document).ready(function(){
        $('#showbtn').dblclick(function(){
            alert($('#your_name').val());
            return false;
        });
    });
</script>

.dblclick( [eventData ], handler )

Cách này có hai tham số.

  • eventData: là một object chứa dữ liệu mà bạn muốn truyền vào hàm xử lý handler
  • handler: là hàm sẽ thực hiện khi sự kiện click được kích hoạt

Ví dụ RUN
$('#showbtn').dblclick({domain:"Zaidap.com"}, function(e){
   console.log(e.data);
});

Bạn hãy bật console lên để xem kết quả nhé.

.dblclick()

Đây là cách gọi sự kiện dblclick, nghĩa là nó sẽ tạo ra một hành động click mặc dù user không có click.

Ví dụ RUN
<script>
    $(document).ready(function () {

        $('#showbtn').dblclick(function () {
            alert($('#your_name').val());
            return false;
        });
        $('#setclick').click(function () {
            $('#showbtn').dblclick();
        });
    });
</script>
<form method='get'>
    <input type='text' name='your_name' id='your_name'/><br/>
    <input type='button' value='Click 2 lần' id='showbtn'/> 
    <input type='button' value='Click 1 lần' id='setclick'/>
</form>

Trong ví dụ này mình thiết lập hiển thị nội dung của ô textbox vào sự kiện dblclick của button thứ nhất. Tại button thứ 2 mình đã thực hiện hành một động dblclick lên button thứ nhất khi xảy ra sự kiện click trên nó.

Nguồn: Zaidap.com.net

Trịnh Tiến Mạnh

27 chủ đề

6824 bài viết

Cùng chủ đề
0