Câu chuyện giả lập nhấp chuột bằng Javascript - tạo click chuột ảo bằng Javascript

codevodoi
codevodoi
Bài này khá nhạt đề nghị chuyển ngay xuống mục chính bằng menu phía trên

Câu chuyện giả lập nhấp chuột bằng Javascript

Tại sao phải giả lập nhấp chuột ? Hay tại sao phải tạo click chuột ảo ?

À thì, đôi khi muốn thì thế thôi chứ biết giải thích làm sao được nhỉ.😂. Tui không biết các ông tạo click chuột ảo với mục đích gì nhưng với tui thì khá là nhiều mục đích. Ví dụ :
Tui muốn kích hoạt một thẻ/element nào đó thông qua một thẻ nào đó có chứa một class thuộc tính hoặc là không, tuy nhiên hai thẻ này lại không liên quan đến nhau. [Chà khó hiểu thế]
Ví dụ giờ các ông thử click vào thì sẽ nhận click ảo, ở cái này 2 tui có gắn một trình nghe sự kiện là nếu bị nhấn thì kích hoạt hàm này.
alert('Hello World')
Và hàm này có chức năng xuất một thông báo alert lên màn hình.

Còn ông nào thắc mắc là sao không gắn luôn trình nghe sự kiện lên cái này 1 để kích hoạt luôn cho nó nhanh thì, đây chỉ là ví dụ cho các ông hiểu thôi. Chứ còn mở rộng ra thì ông nào cần mới dùng thui chớ.

Giả click chuột bằng Jquery

Với Jquery để tạo một click ảo như thế này đơn giản các ông chỉ cần sử dụng trigger()
Như ví dụ trên tui có
$('#cái_này_1').click(
     function(){
          $('#cái_này_2').trigger('click')
     }
)
Nhưng tui lại muốn khó khăn hơn.😐... Thực ra là trong lúc ngẫu hứng tui đã nghĩ tại sao không convert toàn bộ code trong những file .js của tui từ phụ thuộc nhiều vào Jquery thành toàn bộ JavaScript thuần😕 [Vâng rất là mệt nhưng may mắn tui cũng hoàn thành...] Thì gặp phần click ảo này khiến tui thấy... Tui không học JavaScript mà đâm đầu vào phụ thuộc vào Jquery ngay nên ... các ông biết đấy. Tui bó tay phần này. Đừng giống tui.

Giả click chuột bằng JavaScript

Vâng mục chính của chúng ta đây. Để giả một click chuột, các trình duyệt hỗ trợ một hàm gọi là MouseEvent() chuyên sử dụng để tạo ra các sự kiện khác nhau như click, dblclick, mouseup, mousedown

Vậy hàm sau sẽ tạo một cú click ảo lên đối tương el
function clickVirtual(el){
    var evt = new MouseEvent("click", {
      view: window,
      bubbles: true,
      cancelable: true
    });
    el.dispatchEvent(evt);
  }
Ví dụ, tui muốn click vào đối tượng có id là demo như vậy
var element = document.getElementById('demo');
clickVirtual(element);
Thế là xong.

Còn ông nào bảo tui giải thích cách code hoạt động hay ý nghĩa từng dòng code thì xin lũi các ông nhé. Tui tự học nên hiểu theo cách riêng của tui nên tui cũng không biết cách hiểu của tui đúng hay sai, nên tốt nhất là tui không chia sẻ. Các ông muốn có thể tham khảo thêm tại https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

Nhược điểm :


JavaScript JavaScript_Tips