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

しかし、最初の要素「ツールバー-icons_zoom-in'isが有効になっていますが、第二の要素 『ツールバー-icons_zoomアウト』を無効のまま：私はこのような何かをやっています。これを解決する方法はありますか？

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

DEMO：

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

それが正常に動作しています。デモをチェックしてください。

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

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