数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究如何使用 jQuery 点击页面上的任何位置，但排除一个元素？
我们将学习如何检查用户是否点击了页面上的任何位置，但排除了一个元素，我们将使用 JavaScript 和 jQuery 来实现。
在使用模态框时，我们需要在用户点击模态框外部时关闭模态框。因此，我们可以使用 JavaScript 或 jQuery 的各种方法来实现。
此外，还有其他用例需要我们检查用户是否点击了特定元素。例如，当用户点击下拉菜单外部时，关闭下拉菜单；否则，从下拉菜单中选择选项。
这里，我们有不同的方法来检查用户是否点击了页面上的任何位置，但排除了一个元素，我们将使用 jQuery 来实现。
将点击的元素与不可点击的元素进行比较
在 jQuery 中，我们可以在文档上添加一个点击事件监听器。因此，每当用户点击文档上的任何位置时，我们都可以监听该事件。
在这里，我们将获取点击的元素并使用目标对象的 id 属性查找其 id。之后，我们将该 id 与不可点击元素的 id 进行比较，如果两者匹配，则表示用户点击了不可点击的元素。
语法
用户可以使用以下语法将点击元素的 id 与不可点击元素的 id 进行匹配，以检查是否点击了不可点击的元素。
if (event.target.id == "unClickable") return; // unclickable element is clicked, return from the function. // perform the task on click outside.
在上面的语法中，事件详细信息包含触发点击事件的目标对象，而“id”是目标对象的属性。
示例
在下面的示例中，我们创建了 div 元素并将“unclickable”作为 id 值分配给它。之后，每当用户点击 body 元素时，我们检查目标元素的 id 是否与“unclickable”匹配。如果两者匹配，我们将执行函数中的 return 语句；否则，我们将执行某些操作来处理点击事件。
<html>
<head>
<style>
#unClickable {
height: 200px;
width: 600px;
background-color: aqua;
font-size: 2rem;
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
</head>
<body>
<h3>Comparing the clicked element with the unclickable element</h3>
<p>Click anywhere the on the page outside and inside the div element below</p>
<div id = "unClickable"> This is an unclickable div element </div>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
$('body').click((event) => {
if (event.target.id == "unClickable")
return;
output.innerHTML += "You have clicked outside the div element. <br>";
});
</script>
</body>
</html>
使用事件的 stopPropagation() 方法
stopPropagation() 方法阻止父元素执行任何事件。因此，我们可以对任何 HTML 元素使用 stopPropagation() 方法，并向整个文档添加点击事件，以使特定 HTML 元素不可点击。
语法
用户可以按照以下语法使用 stopPropagation() 方法点击整个文档，但排除任何单个 HTML 元素。
$('html').click(() =>: {
// clicking outside the div element
});
$('#modal').click(function (event) {
event.stopPropagation();
});
在上面的语法中，我们通过访问“html”向整个文档添加了点击事件。此外，我们还在包含 id 为“modal”的元素上添加了点击事件，并使用 stopPropagation() 方法来阻止点击。
示例
在下面的示例中，我们创建了模态框。当用户打开网页时，它会自动显示模态框元素。之后，当用户点击模态框元素外部时，它会关闭模态框元素，用户可以在输出中观察到这一点。
<html>
<head>
<style>
#modal {
height: 200px;
width: 600px;
font-size: 2rem;
border: 5px solid black;
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
</head>
<body>
<h2>Using the <i> stopPropagation() </i> method in jQuery </h2>
<p>Below DIV element is unclickable. Click anywhere on the page </p>
<div id = "modal"> This is a modal element. </div>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
$('html').click(() => {
$('#modal').css("display", "none");
output.innerHTML = "You have clicked outside the modal."
});
$('#modal').click(function (event) {
event.stopPropagation();
});
</script>
</body>
</html>
使用 jQuery 的 is() 方法
jQuery 的 is() 方法用于匹配 HTML 的两个元素。在这里，我们将匹配点击的元素与不可点击的元素。如果两个元素不匹配，我们将执行我们想要在点击事件上执行的操作。
语法
用户可以按照以下语法使用 is() 方法点击元素外部。
if (!$(event.target).is('#sample_div')) {
// clicked outside
}
在上面的语法中，event.target 表示点击的元素。我们将“#sample_div”作为 is() 方法的参数传递，表示 id 为“sample_div”的元素。
示例
在这个例子中，我们创建了一个小的 div 元素并应用了一些 CSS。之后，我们通过使用 id 访问它们来比较点击的和不可点击的 div 元素。如果两者不匹配，我们将一些 HTML 追加到网页；否则，我们将更改网页的 HTML。
<html>
<head>
<style>
#sample_div {
height: 170px;
width: 600px;
font-size: 2rem;
border: 3px solid green;
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
</head>
<body>
<h2>Using the <i> is() </i>method injQuery </h2>
<p>Click anywhere on the page. Only below DIV element is unclickable.</p>
<div id = "sample_div"> This is a sample div element. </div>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
$('body').click(function (event) {
if (!$(event.target).is('#sample_div')) {
output.innerHTML += "Successfully, clicked outside the div element. <br>"
}
});
</script>
</body>
</html>
用户学习了三种方法来点击文档中的任何位置，但排除一个元素。event.stopPropagation() 方法是使任何元素不可点击的好方法。此外，当用户点击子元素时，我们可以对子元素执行单独的操作，而不是对父元素执行操作。
5K+ 次浏览
