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

Answer 2

它适用于我的情况。检查你的onClick函数zoomNodeOut（），如果它工作。

https://jsfiddle.net/r110668L/

    <li id="toolbar-elements-right">
       <img id="toolbar-icons" style="width:100px; height:100px; background:#111; margin:5px;display: inline-block;" src="images/delete_resource.png" alt="" title="Delete VM" onclick="alert(1)">
       <img id="toolbar-icons" style="width:100px; height:100px; background:#111; margin:5px;display: inline-block;" src="images/power_off.png" alt="" title="Stop VM" onclick="alert(2)">
       <img id="toolbar-icons" style="width:100px; height:100px; background:#111; margin:5px;display: inline-block;" src="images/power_on.png" alt="" title="Start VM" onclick="alert(3)">
       <img id="toolbar-icons_zoom-in" style="width:100px; height:100px; background:#111; margin:5px;display: inline-block;" src="images/zoom-in-icon.png" alt="" title="Zoom In" onclick="alert(4)">
       <img id="toolbar-icons_zoom-out" style="width:100px; height:100px; background:#111; margin:5px;display: inline-block;" src="images/zoom-out-icon.png" alt="" title="Zoom Out" onclick="alert(5)">
   </li>

注意：HTML中存在基本错误。您会看到ID选择器必须在页面/ DOM中是唯一的。您不能拥有多个具有相同ID的元素。

Answer 3

<强>样本：

http://plnkr.co/edit/2g0hsfgeKRImzXbSPF1p?p=preview

工作正常。请查看演示。

＆＃13;

document.getElementById('toolbar-elements-right').style.pointerEvents = 'none';
document.getElementById('d').style.pointerEvents = 'auto';
document.getElementById('e').style.pointerEvents = 'auto';

＆＃13;

<div id="toolbar-elements-right">
  <div id="a" onclick="alert('a')">a</div>
  <div id="b" onclick="alert('b')">b</div>
  <div id="c" onclick="alert('c')">c</div>
  <div id="d" onclick="alert('d')">d</div>
  <div id="e" onclick="alert('e')">e</div>
</div>

＆＃13;

pointerEvents无法正常工作

3 个答案: