PHẦN CƠ BẢN
VÒNG LẶP
DATA TYPES
EVENTS
DOM
BOM
OBJECT
BỔ SUNG
THỰC HÀNH
JAVASCRIPT CĂN BẢN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Sự kiện nhấp đúp chuột ondbclick trong Javascript

Trong bài này chúng ta sẽ tìm hiểu sự kiện nhấp đúp chuột trong Javascript, đó là sự kiện dbclick, được dùng trong trường hợp bạn muốn bắt hành động nhấp đôi chuột của người dùng.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Thực tế thì dbclick ít khi được sử dụng trong lập trình web, thay vào đó thì sự kiện click lại được sử dụng nhiều hơn.

1. Khi nào sử dụng sự kiện ondbclick trong Javascript

Khi bạn muốn bắt hành động nhấp đôi chuột, tức là nhấp chuột trái hai lần vào một thẻ HTML nào đó thì sử dụng sự kiện ondbclick.

Nếu bạn đang sử dụng máy tính Windows thì sẽ thấy sự kiện này rất nhiều, đó là muốn mở một file hay một folder thì bạn phải click đúp chuột trái hai lần.

Bài viết này được đăng tại [free tuts .net]

2. Cú pháp sự kiện ondbclick trong Javascript

Chúng ta có hai cách để bắt sự kiện ondbclick trong javascript, thứ nhất là thông qua thuộc tính ondbclick của các thẻ HTML, thứ hai là sử dụng mã javascript. Cụ thể như sau.

Cách 1: Gắn trực tiếp trên thẻ HTML

<element ondbclick="event_function()"></element>

Trong đó element là thẻ HTML bạn cần bắt sự kiện dbclick, event_function là tên của hàm sẽ được gọi khi xảy ra sự kiện nhấn đúp chuột.

Ví dụ: Hiển thị một thông báo khi người dùng nhấn đúp chuột.

<input type="button" value="Click me" ondbclick="showMessage()"/>
<script>
    function showMessage(){
        alert('Sự kiện dbclick xảy ra!');
    }
</script>

Cách 2: Sử dụng mã javascript để thêm sự kiện

Sử dụng thuộc tính ondblclick để thêm sự kiện.

Demo RUN
<input type="button" id="btn" value="Click me"/>
<script>
    var obj = document.getElementById('btn');
    obj.ondblclick = function(){
        alert('Bạn đã đúp chuột vào thẻ input này');
    };
</script>

Hoặc sử dụng hàm addEventListener.

Demo RUN
<input type="button" id="btn" value="Click me"/>
<script>
    var obj = document.getElementById('btn');
    obj.addEventListener('dblclick', function(){
        alert('Bạn đã đúp chuột vào thẻ input này');
    });
</script>

Trên là cú pháp và cách sử dụng sự kiện đúp chuột dblclick trong Javascript.

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Top