javascript - 禁用对 div 类的点击，但需要启用对同一嵌套类的点击

Question

我有一个名为 expandInnerDivStyle 的 div 类，为此我需要禁用此 div 内的点击

$(".expandInnerDivStyle").css({pointerEvents: "none"});

但是在div中可能有相同类的嵌套div，现在我需要为这个相同类的嵌套div启用点击。

我的要求。 我有一个名为 expandInnerDivStyle 的可折叠 header div 类。单击此按钮在禁用内部所有表单元素之前但在禁用之前需要再次检查是否存在包含相同 expandInnerDivStyle 的嵌套 header 。

单击此按钮需要验证嵌套标题 ID 是否存在，然后应启用它(因此我可以单击此按钮查看表单元素)，但嵌套标题的表单元素应禁用。

我的场景示例。

<div class="expandInnerDivStyle"> Disable this.
   <div class="parent abc"></div>  Disable this.
   <div clas="expandInnerDivStyle"> Need to enable clicks(Nested Class)
      <div class="child mno"></div> Disable this.
      <div class="child mpqr"> Disable this.
           <div clas="expandInnerDivStyle">Need to enable clicks(Nested Class)
                <button/> Disable this.
           </div>
      </div> 
   </div>
   <div class="parent hhh"></div> Disable this.
</div>

请帮我解决这个问题。谢谢。

Answer 1

像这样尝试:

$(".expandInnerDivStyle").css({pointerEvents: "none"});
$(".expandInnerDivStyle .expandInnerDivStyle").css({pointerEvents: "all"});

但是，使用这种方法，您仍然会在顶级 expandInnerDivStyle 上触发事件监听器，如果您在单击具有所有指针事件的子元素时在那里有它的话