Làm thế nào để mô phỏng một cú nhấp chuột bằng JavaScript?
Các phương pháp sau có thể được triển khai để áp dụng mô phỏng nhấp chuột trong JavaScript:
- “ trong một cái nhấp chuột ' Sự kiện.
- “ addEventListener () ' phương pháp.
- “ nhấp chuột() ' phương pháp.
Phương pháp 1: Mô phỏng một nhấp chuột bằng JavaScript bằng sự kiện onclick
Một ' trong một cái nhấp chuột ”Xảy ra khi nút được nhấn. Cách tiếp cận này có thể được áp dụng để gọi một hàm khi nhấp vào nút và tăng “ số lần nhấp chuột ”Mỗi lần nhấp vào nút.
Ghi chú bên lề: Một ' trong một cái nhấp chuột Sự kiện ”có thể được áp dụng đơn giản bằng cách gắn nó với một chức năng cụ thể.
Thí dụ
Xem qua đoạn mã sau:
< trung tâm >
< phong cách h3 = 'background-color: lightblue;' > Nhấp vào Mô phỏng < nhịp lớp = 'đếm' > nhịp > lần h3 >
< id nút = 'btn1' trong một cái nhấp chuột = 'countClick ()' > Nhấp vào đây ! cái nút >
trung tâm >
- Bao gồm tiêu đề được chỉ định cùng với “ ”Để tăng thẻ“ đếm ”Trong số các lần nhấp.
- Trong bước tiếp theo, hãy tạo một nút có đính kèm “ trong một cái nhấp chuột ”Sự kiện chuyển hướng đến hàm countClick () sẽ được truy cập khi nhấp vào nút.
Bây giờ, hãy xem qua các dòng mã JavaScript sau:
< script >
hãy nhấp chuột = 0 ;
chức năng đếm ( ) {
những cú nhấp chuột = những cú nhấp chuột + 1 ;
tài liệu. querySelector ( '.đếm' ) . textContent = những cú nhấp chuột ;
}
script >
Trong phần js trên của mã:
- Ở đây, trước tiên hãy khởi tạo các nhấp chuột bằng “ 0 ”.
- Sau đó, khai báo một hàm có tên “ countClick () ”. Theo định nghĩa của nó, hãy tăng “ những cú nhấp chuột ' với ' 1 ”. Điều này sẽ dẫn đến việc tăng số lượng mỗi khi nút được nhấp.
- Cuối cùng, truy cập vào “ nhịp ”Sử dụng phần tử“ document.querySelector () ' phương pháp. Ngoài ra, hãy áp dụng “ textContent ”Để phân bổ số lần nhấp tăng dần đã thảo luận trước đó cho phần tử span.
Kết quả đầu ra sẽ như sau:
Chức năng của bộ đếm thời gian tăng dần theo mỗi lần nhấp có thể được quan sát trong đầu ra ở trên.
Phương pháp 2: Mô phỏng một nhấp chuột bằng JavaScript thông qua phương thức addEventListener ()
Các ' addEventListener () ”Phương thức phân bổ một trình xử lý sự kiện cho một phần tử. Phương pháp này có thể được thực hiện bằng cách gắn một sự kiện cụ thể vào một phần tử và cảnh báo người dùng khi kích hoạt sự kiện.
Cú pháp
yếu tố. addEventListener ( sự kiện, chức năng )Trong cú pháp đã cho:
- “ Sự kiện ”Đề cập đến tên sự kiện.
- “ hàm số ”Trỏ đến hàm để thực thi khi sự kiện xảy ra.
Thí dụ
Minh chứng dưới đây giải thích khái niệm đã nêu:
< trung tâm > < thân hình >< a href = '#' Tôi = 'liên kết' > Nhấp vào liên kết một >
thân hình > trung tâm >
< script >
là con dê = tài liệu. getElementById ( 'liên kết' ) ;
lấy. addEventListener ( 'nhấp chuột' , ( ) => báo động ( 'Nhấp vào Mô phỏng!' ) )
script >
Trong đoạn mã trên:
- Đầu tiên, hãy chỉ định một “ mỏ neo ”Để bao gồm liên kết được chỉ định
- Trong phần JavaScript của mã, hãy truy cập vào liên kết đã tạo bằng cách sử dụng “ document.getElementById () ' phương pháp.
- Cuối cùng, áp dụng “ addEventListener () 'Đối với' đã truy cập ' liên kết ”. Các ' nhấp chuột ”Sự kiện được đính kèm trong trường hợp này sẽ dẫn đến cảnh báo cho người dùng khi nhấp vào liên kết đã tạo.
Đầu ra
Phương pháp tiếp cận 3: Mô phỏng một lần nhấp bằng JavaScript bằng cách sử dụng phương thức click ()
Các ' nhấp chuột() ”Thực hiện một mô phỏng nhấp chuột vào một phần tử. Phương pháp này có thể được sử dụng để mô phỏng một cú nhấp chuột trực tiếp vào các nút đính kèm như tên chỉ định.
Cú pháp
yếu tố. nhấp chuột ( )Trong cú pháp đã cho:
- “ yếu tố ”Trỏ đến phần tử mà nhấp chuột sẽ được thực hiện.
Thí dụ
Đoạn mã sau giải thích khái niệm đã nêu:
< trung tâm > < thân hình >< h3 > Bạn đã tìm đây trang hữu ích ? h3 >
< nút onclick = 'simulateClick ()' Tôi = 'mô phỏng' > Đúng cái nút >
< nút onclick = 'simulateClick ()' Tôi = 'mô phỏng' > Không cái nút >
< id h3 = 'cái đầu' Phong cách = 'background-color: lightgreen;' > h3 >
thân hình > trung tâm >
- Đầu tiên, hãy bao gồm tiêu đề đã nêu trong “
' nhãn. - Sau đó, tạo hai nút khác nhau với id được chỉ định.
- Ngoài ra, hãy đính kèm một “ trong một cái nhấp chuột ”Sự kiện với cả hai lệnh gọi hàm simulateClick ().
- Trong bước tiếp theo, bao gồm một tiêu đề khác với “ Tôi ”Để thông báo cho người dùng ngay sau khi“ nhấp chuột ”Được mô phỏng.
Bây giờ, hãy xem qua các dòng JavaScript được cung cấp bên dưới:
< script >chức năng mô phỏng ( ) {
tài liệu. getElementById ( 'mô phỏng' ) . nhấp chuột ( )
để có được = tài liệu. getElementById ( 'cái đầu' )
lấy. innerText = 'Nhấp vào Mô phỏng!'
}
script >
- Xác định một chức năng “ simulateClick () ”.
- Tại đây, truy cập các nút đã tạo bằng cách sử dụng nút “ document.getElementById () 'Và áp dụng' nhấp chuột() ”Đối với họ.
- Bây giờ, tương tự, hãy truy cập vào tiêu đề được phân bổ và áp dụng “ innerText ”Để hiển thị thông báo đã nêu dưới dạng tiêu đề khi nhấp chuột được mô phỏng.
Đầu ra
Trong kết quả đầu ra ở trên, rõ ràng là cả hai nút được tạo ra đều mô phỏng cú nhấp chuột.
Blog này trình bày cách áp dụng mô phỏng nhấp chuột bằng JavaScript.
Sự kết luận
Một ' trong một cái nhấp chuột Sự kiện ' addEventListener () 'Hoặc phương pháp' nhấp chuột() ”Có thể được sử dụng để mô phỏng một nhấp chuột bằng JavaScript. Một ' trong một cái nhấp chuột Sự kiện ”có thể được áp dụng để mô phỏng một lần nhấp mỗi khi nút được nhấp dưới dạng một bộ đếm. Các ' addEventListener () ”Có thể được sử dụng để đính kèm một sự kiện vào liên kết và thông báo cho người dùng khi mô phỏng nhấp chuột. Các ' nhấp chuột() ”Có thể được áp dụng cho các nút đã tạo và thực hiện các chức năng cần thiết cho mỗi nút. Bài viết này giải thích cách áp dụng mô phỏng nhấp chuột trong JavaScript.