css 禁止多次点击导致的选中了目标div的文字

**CSS 禁止多次点击导致的选中了目标DIV的文字**

在网页开发中，经常会遇到一个问题：当用户点击某个元素（如按钮、链接等）时，整个页面都会被选中，而不是仅仅是点击的那个元素。这通常是因为 CSS 的默认行为是将整个文档作为选择区域。这种情况下，我们需要使用 CSS 来禁止这种行为，让目标DIV的文字不被选中。

**解决方案**

为了解决这个问题，我们可以使用 CSS 的 `user-select` 属性（或 `-webkit-user-select`、`-moz-user-select` 等前缀版本）。这个属性允许我们控制用户是否可以选择文本。

css/* 禁止选择 */
.user-select-none {
 -webkit-user-select: none; /* Safari */
 -moz-user-select: none; /* Firefox */
 -ms-user-select: none; /* IE10+ */
 user-select: none;
}

html<!-- HTML -->
<button class="user-select-none" onclick="showPop()">点击我</button>
<div id="pop" style="display: none;">这是一个弹出窗口</div>

<script>
 function showPop() {
 document.getElementById("pop").style.display = "block";
 }
</script>

javascript// JavaScriptdocument.addEventListener("click", function(event) {
 if (event.target.tagName === "BUTTON") {
 event.preventDefault();
 event.stopPropagation();
 }
});