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

请查看下面的图片以了解错误：

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

我怀疑这是由于我对jQuery的错误使用而发生的

最佳答案

我尝试修复它，但仍然无法正常工作，因为您必须单击打开该字段所用的字段以再次将其关闭。您应该为结束图标构建一个点击处理程序，然后它应该可以工作。

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

首先，我检查每个项目是否被阻止，如果被阻止，则返回。
然后，我将所有项目设置为“已阻止”，然后取消阻止当前（此）项目。
关闭点击处理程序（关闭图标）应删除所有被阻止的条目，例如$('.closing-link').click(function(){ allItems.toggleClass("blocked"); // your closing code follows here });

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

我的解决方案中的摘要。