資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 JavaScript 中檢查點選的元素是否為 div？
您是否曾經使用過模態框或在任何網站上見過它？當您點選模態框外部時，它會關閉模態框。在這種情況下，我們必須檢測使用者是否點選了模態框元素的內部或外部。如果使用者點選模態框元素的外部，我們需要關閉模態框元素。
在本教程中，我們將學習檢測 div 元素點選的不同方法。
使用 onClick 屬性檢查點選的元素是否為 div
在 HTML 中，我們可以將 onClick 屬性新增到任何 HTML 元素，併為其分配函式表示式。使用者點選該特定 HTML 元素將呼叫分配的函式。
語法
使用者可以使用以下語法將 onClick 屬性與 div 元素一起使用，以檢查點選的元素是否為 div。
<div onClick = "clickFunction()">This is a div!</div>
<script>
function clickFunction() {
// perform some operation on click
}
</script>
在上述語法中，當用戶點選 div 元素時，它將呼叫 clickFunciton() JavaScript 函式。
示例
在下面的示例中，我們建立了一個 div 元素並提供了一些 CSS 樣式。之後，我們根據語法添加了 div 的 onClick 屬性，並分配了 clickFunction() 表示式作為值。
使用者可以點選 div 並檢視結果。此外，他們還可以點選 div 元素外部，可以觀察到網頁上沒有任何變化。
<html>
<head>
<style>
div {
height: 300px;
width: 300px;
background-color: red;
font-size: 3rem;
}
</style>
</head>
<body>
<h3>Using the<i> onClick attribute </i> to check if the clicked element is div or not.</h2>
<div onClick = "clickFunction()"> This is a div! </div>
<p> Please click anywhere in the above div</p>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
// calling the function when the user clicks on the div element
function clickFunction() {
output.innerHTML += "Click Triggered on the div element! <br/>";
}
</script>
</body>
</html>
在 div 元素上使用 addEventListner() 方法
addEventListner() 方法允許我們在特定 HTML 元素上新增事件。在 JavaScript 中，我們可以透過 id 訪問 HTML 元素並新增事件監聽器。
這裡，我們將“click”作為 adddEventListner() 方法的第一個引數傳遞，因為我們需要檢測 div 元素上的點選事件。我們將回調箭頭函式作為第二個引數傳遞，當特定 div 元素上觸發點選事件時，它將被呼叫。
語法
使用者可以按照以下語法使用 addEventListner() 方法檢測 div 上的點選。
<div id = "testDiv"> This is a div! </div> <script> let testDiv = document.getElementById("testDiv"); testDiv.addEventListener("click", () => { // div is clicked! }); </script>
在上述語法中，我們僅檢測 id 為“testDiv”的 div 上的點選。
示例
在本例中，我們建立了 div 元素，並在 JavaScript 中使用 id 訪問了它。之後，當用戶點選 div 元素時，帶有 click 事件的 addEventListner() 方法將呼叫回撥函式。
<html>
<head>
<style>
div {
height: 100px;
width: 500px;
background-color: lightblue;
font-size: 1rem;
}
</style>
</head>
<body>
<h3>Using the <i> addEventListener method </i> to check if the clicked element is div.</h3>
<div id = "testDiv"> This is a div! </div>
<p> Please cick anywhere in the above div </p>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
// access the div by id
let testDiv = document.getElementById("testDiv");
// add event listener to the div element
testDiv.addEventListener("click", () => {
output.innerHTML += "You have clicked on the div element and detected it using addEventListener! </br>";
});
</script>
</body>
</html>
使用 instanceof 運算子檢查點選的元素是否為 div
instanceof 運算子允許開發人員檢查元素或變數是否為物件或介面的例項。在 JavaScript 中，HTMLDivElement 是一個介面，我們可以檢查任何元素是否屬於 HTMLDivElement。
這裡，我們將向文件的所有 HTML 元素新增點選事件，並檢查點選的元素是否是 HTMLDivElement 的例項。如果它返回 true，則點選的元素是 div 元素。
語法
使用者可以按照以下語法使用 instanceof 運算子檢查點選的元素是否為 div 元素。
window.addEventListener("click", function (event) {
let clickedElement = event.target;
let isDiv = clickedElement instanceof HTMLDivElement;
if (isDiv) {
// div element is clicked
}
});
我們在上述語法中在整個視窗上添加了事件監聽器。event.target 返回點選的元素，我們正在檢查該點選的元素是否是 HTMLDivElement 的例項。
示例
以下示例包含多個 div 和其他 HTML 元素。在 JavaScript 中，我們已為網頁上的點選事件添加了事件監聽器。之後，我們檢查每次點選時點選的元素是否為 div。
當用戶點選任何 div 元素時，以下示例會列印一條訊息。
<html>
<head>
<style>
div {
height: 100px;
width: 500px;
background-color: lightblue;
font-size: 1rem;
margin: 20px;
}
</style>
</head>
<body>
<h3>Using the <i> instanceof operator </i> to check if the clicked element is div or not.</h3>
<div>Hello, users!</div>
<div> Welcome to TutorialsPoint! </div>
<div> JavaScript is easy to learn! </div>
<p id="output"></p>
<script>
let output = document.getElementById("output");
// add event listener on the whole window
window.addEventListener("click", function (event) {
let clickedElement = event.target;
// check if the clicked element is a div
let isDiv = clickedElement instanceof HTMLDivElement;
if (isDiv) {
output.innerHTML += "You have clicked the div element, and its inner HTML is " + clickedElement.innerHTML + "<br/>";
}
});
</script>
</body>
</html>
我們學習了三種檢測 HTML div 元素上的點選事件的方法。前兩種方法檢測特定 div 元素上的點選。如果使用者需要檢測網頁上每個 div 元素上的點選，則應使用第三種方法，使用 instanceof 運算子。
9K+ 閱讀量
