資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
