极客笔记JavaScript 如何检查被点击的元素是否为div
您是否曾经使用过模态框或在网站上看到过它？当您在模态框外点击时，它会关闭模态框。在这种情况下，我们必须检测用户是否点击了模态框元素内部或外部。如果用户点击了模态框元素外部，我们需要关闭模态框元素。
在本教程中，我们将学习不同的方法来检测div元素上的点击事件。
使用onClick属性来检查被点击的元素是否为div
在HTML中，我们可以为任何HTML元素添加onClick属性，并将其赋予函数表达式。用户单击特定的HTML元素时会调用分配的函数。
语法
用户可以使用下面的语法来将onClick属性与div元素一起使用，以检查被点击的元素是否为div。
<div onClick = "clickFunction()">This is a div!</div>
<script>
function clickFunction() {
// perform some operation on click
}
</script>
在上面的语法中，当用户点击div元素时，将调用一个clickFunction() JavaScript函数。
示例
在下面的示例中，我们创建了一个div元素并给它一些CSS样式。之后，我们按照语法添加了onClick属性到div中，并将clickFuction()表达式赋给了它。
用户可以点击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’作为addEventListner()方法的第一个参数传递，因为我们需要检测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来访问它。之后，通过click事件使用 addEventListner() 方法来调用回调函数，当用户点击div元素时。
<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运算符。