JavaScript kiểm tra nút nào đã được nhấp

Để kiểm tra xem một phần tử có được nhấp hay không, hãy liên kết trình xử lý sự kiện nhấp với phần tử đó sau khi lấy tham chiếu của phần tử đó bằng phương thức getElementById()

Hãy xem một số ví dụ để hiểu rõ

Ví dụ 1. Kiểm tra xem Phần tử đã được nhấp chưa
Trong tệp HTML, trước tiên, hãy tạo một biểu mẫu đơn giản có trường văn bản nhập và một nút.

< loại đầu vào ="văn bản" tên< ="name" id="name" placeholder="Enter name">

Tạo nút gửi có id “gửi” sẽ được sử dụng để truy cập tham chiếu của nút trong JavaScript

  < id nút = "gửi">Submitbutton>

Trong tệp JavaScript, hãy thêm mã được cung cấp bên dưới

var submitButton = tài liệu. getElementById('submit');
let buttonClicked = false;
submitButton.addEventListener('click', < . handleClick() {
 console.log('Đã nhấp vào nút gửi');
 if (buttonClicked) {
  console.log('Nút gửi đã được nhấp');
 }
 buttonClicked = true;
});

Trong khối mã trên

• Đầu tiên, lấy tham chiếu của nút bằng phương thức “getElementById()”
• Tạo một biến “buttonClicked” và đặt nó là “false”
• Gọi “addEventListener()” sẽ xử lý sự kiện nhấp chuột bằng cách xác định hàm “handleClick()”
• In thông báo trên nút đầu tiên và nhấp vào chức năng đã xác định
• Khi nhấp lại vào cùng một nút, in thông báo “Nút Gửi đã được nhấp”
• Thay đổi trạng thái của thuộc tính “buttonClicked” thành “true”

Đầu ra cho mã đã cho sẽ như sau

Ví dụ 2. Hạn chế lần nhấp vào nút sau một lần nhấp
Để hạn chế lần nhấp vào nút gửi, hãy viết mã được cung cấp bên dưới vào tệp JavaScript hoặc thẻ

var submitButton = tài liệu. getElementById('submit');
let buttonClicked = false;
submitButton.addEventListener('click', < handleClick() {
 if (buttonClicked) {
  return;
 }
 console.log('Đã nhấp vào nút gửi');
 buttonClicked = true;
});

Trong đoạn mã trên

• Đầu tiên, lấy tham chiếu nút gửi bằng cách sử dụng id được chỉ định của nó với sự trợ giúp của phương thức “getElementById()”
• Tạo một biến mới có tên là “buttonClicked” và gán giá trị của nó là “false”
• Trong phương thức “addEventListener()”, hãy xác định một hàm có tên là “handleClick()” để quản lý các sự kiện nhấp chuột
• Sau khi nút được nhấp, hãy đặt giá trị của thuộc tính “buttonClicked” thành “true”

Trong trường hợp này, khi nhấp vào nút lần đầu tiên, thông báo đã thêm sẽ được hiển thị. Trong trường hợp khác, sẽ không có gì xảy ra khi nhấp đi nhấp lại vào cùng một nút

Tất cả các thông tin cần thiết liên quan đến việc kiểm tra xem phần tử đã được nhấp hay chưa sử dụng JavaScript đều được cung cấp trong bài đăng này

Phần kết luận

Để kiểm tra xem phần tử đã được nhấp chưa, hãy sử dụng phương thức addEventListener() trên phần tử sau khi lấy tham chiếu của phần tử bằng phương thức getElementById(). Hơn nữa, giá trị của thuộc tính được kiểm tra của nút cũng có thể hỗ trợ về vấn đề này. Hướng dẫn này mô tả quy trình kiểm tra xem phần tử đã được nhấp hay chưa bằng JavaScript

Tìm hiểu cách lấy giá trị của thuộc tính ID của Phần tử HTML được nhấp trong JavaScript bằng cách sử dụng đối tượng sự kiện

Đây là div trình bao bọc với nhóm nút id có bốn nút trong đó

Mỗi nút có một thuộc tính ID

  Button 1
  Button 2
  Button 3
  Button 4
  Button 5

• Nhận ID của phần tử được nhấp bằng cách sử dụng vòng lặp
• Nhận ID của phần tử được nhấp bằng phần tử gốc

Nhận ID của phần tử được nhấp bằng cách sử dụng vòng lặp

Một trong những cách để lấy thuộc tính ID của phần tử được nhấp là bạn thực sự đính kèm các sự kiện nhấp vào tất cả các nút bên trong vòng lặp For

Nhận tham chiếu DOM tới tất cả các nút bằng cách gọi getElementsByTagName() trên đối tượng tài liệu bằng nút đối số

Gán nó cho các nút hằng số sẽ là Đối tượng Bộ sưu tập HTML

Lặp qua các nút bằng vòng lặp for

Đính kèm một sự kiện nhấp vào mỗi nút bên trong vòng lặp với chức năng gọi lại buttonPressed()

Hàm gọi lại buttonPressed() sẽ có một đối tượng sự kiện được trả về có tất cả dữ liệu về phần tử HTML được nhấp vào

Để lấy phần tử được nhấp, hãy sử dụng thuộc tính đích trên đối tượng sự kiện

Sử dụng thuộc tính id trong sự kiện. đối tượng mục tiêu để lấy ID của phần tử được nhấp

const buttons = document.getElementsByTagName("button");

const buttonPressed = e => {
  console.log(e.target.id);  // Get ID of Clicked Element
}

for (let button of buttons) {
  button.addEventListener("click", buttonPressed);
}

dùng thử

Xem Pen Nhận ID của phần tử được nhấp trong JavaScript (Sử dụng phần tử gốc) của Raja Tamil (@rajarajan) trên CodePen

Làm cách nào để kiểm tra xem nội dung nào đó có được nhấp vào trong JavaScript không?

Làm cách nào để lấy giá trị của nút được nhấp trong JavaScript?