Question

我的体内有一个包含可单击按钮的按钮。我希望该div之外的所有元素都是不可点击的。

我尝试用H1覆盖整个身体并添加指针事件：没有和div的z-index +1，但是在我的div之外仍然检测到点击。

对于Body指针事件，我什么也不做，因为这将禁用我的整个页面。

这是一个问题，因为轮到玩家2时，如果玩家2不小心在游戏板外点击，他们会放下X而不是所需的O

&lt;span class="avatar2-default bg-dark rounded-circle"&t;
    &lt;a href=""&lt;Hello&lt;/a&gt;
    &lt;input type="text"&gt;
&lt;/span&gt;

Answer 1

如果您使用成熟的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>

Answer 2

只需添加一些JS。

document.addEventListener("click", e => {
  if (!e.target.closest(".gameboard")) return;
  console.log(e.target);
});

function clicked() {
  console.log(1);
}

<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>

禁用元素外部的点击

2 个答案: