在我的React應(yīng)用程序中，我有兩個面板，每個面板都顯示按鈕，并使用flex來調(diào)整它們。下面是正在發(fā)生的事情的簡化的HTML/SCSS等價物:

<div class="bottom-panel left">
  <button>Action 1</button>
</div>
<div class="bottom-panel center">
  <button>Action 2</button>
</div>

.bottom-panel {
  position:absolute;
  width: 100%;
  bottom: 0;
  display: flex;
  &.left {
    justify-content: start;
  }
  &.center {
    justify-content: center;
  }
}

這是CodePen(如果CodePen沒有自動選擇SCSS，請確保選擇它)。

有沒有一種方法，最好不用JavaScript，就能讓兩個按鈕都可以點(diǎn)擊？我嘗試玩指針事件，但沒有成功。

附言

我知道我可以使用單個面板，但是將它們分開有助于我將React應(yīng)用程序中不同組件的關(guān)注點(diǎn)分開，并簡化代碼。

在這個特殊的例子中，可以通過給. left更小的寬度來解決這個問題。對于一般的解決方案，我希望寬度保持在100%。

您可以使用pointer-events: none規(guī)則來防止包含它的div阻塞單擊。

(記住將pointer-events: all添加到任何應(yīng)該可點(diǎn)擊的內(nèi)容中，否則它將繼承none，不會接收到點(diǎn)擊)

.bottom-panel {
  position: absolute;
  width: 100%;
  bottom: 0;
  display: flex;
  pointer-events: none;
}

.bottom-panel.left {
  justify-content: start;
}

.bottom-panel.center {
  justify-content: center;
}

button {
  pointer-events: all;
}

<div class="bottom-panel left">
  <button>Action 1</button>
</div>
<div class="bottom-panel center">
  <button>Action 2</button>
</div>