数据结构
网络
关系数据库管理系统
操作系统
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+ 阅读量
