我体内有一个包含可点击按钮的按钮。我希望此 div 之外的所有元素都不可点击。
我尝试用我的 H1 覆盖整个 body 并添加 pointer-events: none 和 z-index +1 到我的 div，但在我的 div 之外仍然检测到点击。
我不能对 Body 指针事件做任何事情，因为那会禁用我的整个页面..
这是一个问题，因为当轮到玩家 2 时，如果玩家 2 不小心点击了游戏板外，那么他们将放下 X 而不是所需的 O
<body>
<h1> Tic-Tac-Toe</h1>
<div class="gameboard">
<button class="tic" id="1" onclick="clicked()"></button>
<button class="tic" id="2" onclick="clicked()"></button>
<button class="tic" id="3" onclick="clicked()"></button>
<button class="tic" id="4" onclick="clicked()"></button>
<button class="tic" id="5" onclick="clicked()"></button>
<button class="tic" id="6" onclick="clicked()"></button>
<button class="tic" id="7" onclick="clicked()"></button>
<button class="tic" id="8" onclick="clicked()"></button>
<button class="tic" id="9" onclick="clicked()"></button>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
最佳答案
如果您使用成熟的 JavaScript eventListener 而不是仅仅将 onclick 属性添加到您的一些 HTML 元素，您可能会更轻松。
您通过 addEventListener 方法命名的任何函数都会自动访问触发它的事件(例如 click 事件)。当你定义函数时，你只需给它一个参数(可以命名为任何东西，但是“event”是一个非常直观的选择)——然后在函数内部，你访问 event 对象作为具有相同名称的局部变量。
event 对象有一个名为 target 的属性，它包含事件发生的 HTML 元素(在这种情况下，希望您的纽扣)。一旦您知道用户点击了什么，您就可以采取相应的行动——比如响应点击或忽略它:
document.addEventListener("click", handleTicClick); // Runs the function when a click happens
function handleTicClick(event){
const whatGotClicked = event.target; // Remembers the HTML element that got clicked
if(whatGotClicked.classList.contains("tic")){ // Checks a condition related to the element
console.log(`Hey, somebody clicked on button #${whatGotClicked.id}!`);
}
else{
console.log("Let's just ignore this click");
}
}button{ margin-bottom: 0.3em; }<h1> Tic-Tac-Toe</h1>
<div class="gameboard">
<button class="tic" id="1">_</button>
<button class="tic" id="2">_</button>
<button class="tic" id="3">_</button>
<br />
<button class="tic" id="4">_</button>
<button class="tic" id="5">_</button>
<button class="tic" id="6">_</button>
<br />
<button class="tic" id="7">_</button>
<button class="tic" id="8">_</button>
<button class="tic" id="9">_</button>
</div>关于javascript - 禁用元素外部的点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57243780/