<div 外點(diǎn)擊是指在網(wǎng)頁中，當(dāng)用戶點(diǎn)擊 div 元素外部的區(qū)域時(shí)觸發(fā)的事件。通常情況下，點(diǎn)擊 div 外部的區(qū)域不會(huì)觸發(fā)任何事件，但是對(duì)于某些特定的需求，我們可能希望在用戶點(diǎn)擊 div 外部時(shí)執(zhí)行一些特定的操作。下面將通過幾個(gè)代碼案例來詳細(xì)解釋和說明該事件的使用方法。
案例一：
假設(shè)有一個(gè)網(wǎng)頁上有一個(gè) div 元素，當(dāng)用戶點(diǎn)擊 div 區(qū)域時(shí)，彈出一個(gè)提示框，并顯示點(diǎn)擊位置的坐標(biāo)信息。當(dāng)用戶點(diǎn)擊 div 外部的區(qū)域時(shí)，提示框則會(huì)消失。代碼如下：
在這個(gè)例子中，當(dāng)用戶點(diǎn)擊 div 區(qū)域時(shí)，會(huì)彈出一個(gè)提示框，顯示點(diǎn)擊的坐標(biāo)信息。當(dāng)用戶點(diǎn)擊 div 外部時(shí)，會(huì)再次彈出一個(gè)提示框，提示用戶點(diǎn)擊了 div 外部的區(qū)域。
案例二：
假設(shè)有一個(gè)網(wǎng)頁上有一段文本，當(dāng)用戶點(diǎn)擊文本中的某個(gè)單詞時(shí)，顯示該單詞的翻譯。當(dāng)用戶點(diǎn)擊文本以外的區(qū)域時(shí)，翻譯框則會(huì)隱藏。代碼如下：
在這個(gè)例子中，當(dāng)用戶點(diǎn)擊文本中的某個(gè)單詞時(shí)，會(huì)在該單詞的正下方顯示一個(gè)翻譯框。當(dāng)用戶點(diǎn)擊文本以外的區(qū)域時(shí)，翻譯框會(huì)隱藏起來。
通過以上兩個(gè)案例，我們可以清楚地了解和使用<div>外點(diǎn)擊事件。根據(jù)具體的需求，我們可以將該事件應(yīng)用于不同的場(chǎng)景，提供更好的用戶體驗(yàn)。
案例一：
假設(shè)有一個(gè)網(wǎng)頁上有一個(gè) div 元素，當(dāng)用戶點(diǎn)擊 div 區(qū)域時(shí)，彈出一個(gè)提示框，并顯示點(diǎn)擊位置的坐標(biāo)信息。當(dāng)用戶點(diǎn)擊 div 外部的區(qū)域時(shí)，提示框則會(huì)消失。代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>div 外點(diǎn)擊示例</title>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<br>
<script>
var myDiv = document.getElementById("myDiv");
var x, y;
<br>
myDiv.addEventListener("click", function(event) {
x = event.clientX;
y = event.clientY;
alert("你點(diǎn)擊了 div，在坐標(biāo)（" + x + ", " + y + "）處");
});
<br>
document.addEventListener("click", function(event) {
if (!myDiv.contains(event.target)) {
alert("你點(diǎn)擊了 div 外部的區(qū)域");
}
});
</script>
</body>
</html>在這個(gè)例子中，當(dāng)用戶點(diǎn)擊 div 區(qū)域時(shí)，會(huì)彈出一個(gè)提示框，顯示點(diǎn)擊的坐標(biāo)信息。當(dāng)用戶點(diǎn)擊 div 外部時(shí)，會(huì)再次彈出一個(gè)提示框，提示用戶點(diǎn)擊了 div 外部的區(qū)域。
案例二：
假設(shè)有一個(gè)網(wǎng)頁上有一段文本，當(dāng)用戶點(diǎn)擊文本中的某個(gè)單詞時(shí)，顯示該單詞的翻譯。當(dāng)用戶點(diǎn)擊文本以外的區(qū)域時(shí)，翻譯框則會(huì)隱藏。代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>div 外點(diǎn)擊示例</title>
<style>
#myText {
width: 300px;
height: 100px;
background-color: lightyellow;
padding: 10px;
font-size: 18px;
cursor: pointer;
}
<br>
#translation {
display: none;
position: absolute;
width: 200px;
height: 50px;
background-color: lightgreen;
padding: 10px;
font-size: 16px;
text-align: center;
}
</style>
</head>
<body>
<div id="myText">
This is a sample text. Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div id="translation"></div>
<br>
<script>
var myText = document.getElementById("myText");
var translation = document.getElementById("translation");
<br>
myText.addEventListener("click", function(event) {
if (event.target.nodeName === "SPAN") {
var word = event.target.innerText;
var rect = event.target.getBoundingClientRect();
var x = rect.left + window.pageXOffset;
var y = rect.top + window.pageYOffset;
<br>
translation.innerText = "翻譯：" + translate(word);
translation.style.display = "block";
translation.style.left = x + "px";
translation.style.top = (y + 20) + "px";
}
});
<br>
document.addEventListener("click", function(event) {
if (!myText.contains(event.target)) {
translation.style.display = "none";
}
});
<br>
// 模擬翻譯功能
function translate(word) {
var translations = {
"This": "這個(gè)",
"is": "是",
"a": "一個(gè)",
"sample": "示例",
"text": "文本",
// ...
};
<br>
return translations[word] || "未找到翻譯";
}
</script>
</body>
</html>在這個(gè)例子中，當(dāng)用戶點(diǎn)擊文本中的某個(gè)單詞時(shí)，會(huì)在該單詞的正下方顯示一個(gè)翻譯框。當(dāng)用戶點(diǎn)擊文本以外的區(qū)域時(shí)，翻譯框會(huì)隱藏起來。
通過以上兩個(gè)案例，我們可以清楚地了解和使用<div>外點(diǎn)擊事件。根據(jù)具體的需求，我們可以將該事件應(yīng)用于不同的場(chǎng)景，提供更好的用戶體驗(yàn)。
下一篇div 字體加粗