Bạn có thể sử dụng trình nghe sự kiện cho các lần nhấp.
Ví dụ
Sau đây là mã -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="divDemo">
First Division
</div>
<div class="divDemo">
Second Division
</div>
</body>
<script>
document.addEventListener('click', callEventFuncion)
function callEventFuncion(event) {
var div = document.querySelectorAll('.divDemo');
var titleResult = document.querySelectorAll('.my-title');
var result = Array.apply(0, div).find((v) => v.contains(event.target));
if (result) {
console.log(" Incrementing Division Selection");
}
else {
console.log("Incrementing Element Only OutSide of DIV");
}
}
</script>
</html> Để chạy chương trình trên, hãy lưu tên tệp “anyName.html (index.html)”. Nhấp nhanh vào tệp và chọn tùy chọn “Mở bằng Máy chủ Trực tiếp” trong trình chỉnh sửa Mã Visual Studio.
Đầu ra
Điều này sẽ tạo ra kết quả sau trên bảng điều khiển -
Bất cứ khi nào chúng ta nhấp vào phép chia thì nó sẽ tăng phần chia nếu không nó sẽ tăng lên bên ngoài phép chia.
Trường hợp 1
Khi người dùng nhấp vào phần div. Ở đây, tôi đã nhấp hai lần vào phần div. Ảnh chụp nhanh như sau -
Đầu ra trong bảng điều khiển -
Trường hợp 2
Bây giờ, tôi đang nhấp vào bên ngoài phần div bảy lần. Ảnh chụp nhanh như sau -
Điều này sẽ tạo ra kết quả sau trong bảng điều khiển -
