javascript - 如何防止点击事件相互重叠？

Question

错误请看下图:

如图所示，文本存在冲突。网站的初始状态有 6 个不同颜色的 block ，中间有文本。单击后，中间部分会显示更多信息。但是，当您单击另一个框时，背景颜色会更改和/或显示或隐藏每个框内的文本。

我怀疑这是由于我错误地使用了 jQuery 而造成的

Answer 1

我尝试动手修复它，但仍然效果不佳，因为您必须单击用于打开该字段的字段才能再次将其关闭。您应该为关闭图标构建一个点击处理程序，然后它应该可以工作。

https://codepen.io/felixhaeberle/pen/qGjpVJ

首先，我检查每个 Item 是否被阻止，如果被阻止，则返回。然后我将所有元素设置为阻止，然后取消阻止当前(这个)元素。关闭点击处理程序(关闭图标)应该删除所有被阻止的条目，如 $('.closing-link').click(function(){ allItems.toggleClass("blocked");//你的关闭代码如下 } );

  $("#fbPageDesign").on('click', function(){
    if ($(this).hasClass("blocked")) return;
    allItems.toggleClass('blocked');
    $(this).toggleClass("blocked");
    $(".box").toggleClass("bg-color2");
    $(".boxText,.whiteRectangle").toggle();
  });

我的解决方案中的一个片段。