javascript - pointerEvents 不工作

Question

我有以下元素的列表:

<li id="toolbar-elements-right">
  <img id="toolbar-icons" src="images/delete_resource.png" alt="" title="Delete VM" onclick="removeNode()">
  <img id="toolbar-icons" src="images/power_off.png" alt="" title="Stop VM" onclick="changeInstanceStatus('Stop')">
  <img id="toolbar-icons" src="images/power_on.png" alt="" title="Start VM" onclick="changeInstanceStatus('Start')">
  <img id="toolbar-icons_zoom-in" src="images/zoom-in-icon.png" alt="" title="Zoom In" onclick="zoomNodeIn()">
  <img id="toolbar-icons_zoom-out" src="images/zoom-out-icon.png" alt="" title="Zoom Out" onclick="zoomNodeOut()">
</li>

除了函数中的最后两张图片之外，我希望禁用整个列表。我正在做这样的事情:

  document.getElementById('toolbar-elements-right').style.pointerEvents = 'none';
  document.getElementById('toolbar-icons_zoom-in').style.pointerEvents = 'auto';
  document.getElementById('toolbar-icons_zoom-out').style.pointerEvents = 'auto';

但是，第一个元素“toolbar-icons_zoom-in”已启用，但第二个元素“toolbar-icons_zoom-out”仍处于禁用状态。有什么办法可以解决这个问题？

Answer 1

您可以只禁用第一个元素。我为禁用元素添加了一个 css 类，并通过 JavaScript 应用了 css。

<li id="toolbar-elements-right">
  <img class="disable-pointer" id="toolbar-icons" src="images/delete_resource.png" alt="" title="Delete VM" onclick="removeNode()">
  <img class="disable-pointer" id="toolbar-icons" src="images/power_off.png" alt="" title="Stop VM" onclick="changeInstanceStatus('Stop')">
  <img class="disable-pointer" id="toolbar-icons" src="images/power_on.png" alt="" title="Start VM" onclick="changeInstanceStatus('Start')">
  <img id="toolbar-icons_zoom-in" src="images/zoom-in-icon.png" alt="" title="Zoom In" onclick="zoomNodeIn()">
  <img id="toolbar-icons_zoom-out" src="images/zoom-out-icon.png" alt="" title="Zoom Out" onclick="zoomNodeOut()">
</li>

和 JS

var elem = document.querySelectorAll(".disable-pointer");
var i;
for (i = 0; i < elem.length; i++) {
    elem[i].style.pointerEvents = 'none';
}

如果您更喜欢纯 CSS，那么这样做会容易得多

.disable-pointer {
  pointer-events: none;
}