如何在 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 样式。之后，我们按照语法所示将 onClick 属性添加到 div，并将 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");
// 当用户点击 div 元素时调用该函数
function clickFunction() {
output.innerHTML += "Click Triggered on the div element! <br/>";
}
</script>
</body>
</html>
在 div 元素上使用 addEventListner() 方法
addEventListner() 方法允许我们在特定 HTML 元素上添加事件。在 JavaScript 中，我们可以通过 id 访问 HTML 元素并添加事件侦听器。
在这里，我们将传递"click"作为 adddEventListner() 方法的第一个参数，因为我们需要检测 div 元素上的 click 事件。我们将回调箭头函数作为第二个参数传递，当特定 div 元素上的 click 事件触发时，它将被调用。
语法
用户可以按照以下语法使用 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 元素时，带有点击事件的 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 元素被点击
}
});
我们已按照上述语法在整个窗口上添加了事件侦听器。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");
// 在整个窗口上添加事件监听器
window.addEventListener("click", function (event) {
let clickedElement = event.target;
// 检查点击的元素是否是 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 运算符。
