如何使用 jQuery 检测页面上除某个元素之外的其他元素?
我们将学习如何使用 JavaScript 和 jQuery 检测用户是否点击了页面上除某个元素之外的其他元素。
在使用模态框时，我们需要在用户点击模态框外部时关闭模态框。我们可以使用 JavaScript 或 jQuery 的各种方法来实现这一点。
此外，还有其他一些用例需要检测用户是否点击了特定元素。例如，当用户点击下拉菜单外部时，关闭下拉菜单;否则，从下拉菜单中选择该选项。
这里，我们提供了不同的方法来使用 jQuery 检测用户是否点击了页面上除某个元素之外的其他元素。
比较被点击的元素和不可点击的元素
在 jQuery 中，我们可以在文档中添加一个点击事件监听器。因此，每当用户点击文档上的任何位置时，我们都可以监听该事件。
在这里，我们将获取被点击的元素，并使用目标对象的 id 属性找到其 ID。之后，我们将该 ID 与不可点击元素的 ID 进行比较，如果两者匹配，则表示用户点击了不可点击元素。
语法
用户可以使用以下语法将被点击元素的 ID 与不可点击元素的 ID 进行匹配，以检查不可点击元素是否被点击。
if (event.target.id == "unClickable") return; // 不可点击元素被点击，从函数返回。 // 在外部执行点击任务。
在上述语法中，事件详情包含触发点击事件的目标对象，而"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() 方法
stopPropogation() 方法可阻止父元素执行任何事件。因此，我们可以对任何 HTML 元素使用 stopPropogation() 方法，并将 click 事件添加到整个文档，以使特定 HTML 元素无法点击。
语法
用户可以按照以下语法，使用 stopPropogation() 方法点击除单个 HTML 元素之外的整个文档。
$('html').click(() =>: {
// 点击 div 元素之外的内容
});
$('#modal').click(function (event) {
event.stopPropagation();
});
在上述语法中，我们通过访问"html"文件，为整个文档添加了点击事件。此外，我们还在包含"modal"作为id的元素上添加了点击事件，并使用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() 方法是使任何元素不可点击的好方法。此外，当用户点击子元素时，我们可以对子元素(而非父元素)执行单独的操作。
