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

Question

我有一个名为 expandInnerDivStyle 的 div 类，我需要禁用此 div 内的点击，因为我正在这样做

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

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

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

单击此需要验证嵌套标题是否存在，如果存在则应启用（因此我可以单击此查看表单元素）但嵌套标题的表单元素应禁用。

我的场景示例。

<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 触发事件侦听器