Javascript 如果单击了div的边框，则防止对div执行单击操作

我正在尝试用HTML、CSS和Javascript构建Simon游戏的副本。 我的设计离最终状态还差得远，但我已经准备好了基本布局：

每个彩色按钮（绿色、红色、黄色和蓝色）都有各自的单击事件，我正在用console.log语句测试它们

以下是代码中的相关部分：

$（文档）.ready（函数（）{
$（'.center buttons'）。单击（函数（）{
event.stopPropagation（）；
log（“内部单击！”）；
});
$（'#左上角'）。单击（函数（）{
log（'左键单击'）；
});
$（'#右上角'）。单击（函数（）{
log（'右键单击'）；
});
$（'#左下角'）。单击（函数（）{
console.log（'bleft click'）；
});
$（'#右下角'）。单击（函数（）{
console.log（'bright click'）；
});
});
。主区域{
高度：700px；
宽度：700px；
边界半径：50%；
背景色：；
保证金：0px自动；
填充：20px；
}
.包装纸{
位置：相对位置；
顶部：-5px；
}
.中间按钮{
高度：370px；
宽度：370px；
边框：15px实心#444；
边界半径：50%；
背景色：黑色；
保证金：0px自动；
位置：相对位置；
顶部：-550px；
}
#第一排{
显示器：flex；
}
#底层{
显示器：flex；
}
.主按钮{
高度：310px；
宽度：310px；
边框：20px实心#444；
}
#左上{
背景色：#00994d；
边界半径：100%0；
右：50%；
保证金：0px 5px 5px 0px；
}
#右上角{
背景色：#990000；
左：50%；
边界半径：0 100%0 0；
保证金：0px 0px 5px 5px；
}
#左下角{
背景颜色：黄色；
左：50%；
边界半径：01100%；
保证金：5px 5px 0px 0px；
}
#右下角{
背景色：#004d99；
左：50%；
边界半径：0 100%0；
保证金：5px 0px 0px 5px；
}
我尝试用自己的HTML和CSS实现，但您可以相应地进行更改

如果单击了
.parent
，我将记录它，然后用
.child
单击检查它


HTML

<div class=parent>
<div class=child>

</div>
</div>

JQUERY

$(document).ready(function(){
    var flag=false;
    $(".parent").click(function(){
    flag=true;
  });
    $(".child").click(function(e){
    if(flag==false){
        alert("CHILD IS ALIVE");
    }
  });
});

实际上，border不是另一个html元素，但它属于div本身。因此，如果在其div上应用了click事件，则无法避免单击边框。
如果你真的需要这样一个宽度的边框，你可以在一个div里面放一个div，。
保持外部div的背景色为边框颜色，内部div的颜色为红色/绿色/蓝色/黄色。
然后您可以在内部div上应用click事件来解决问题
使用边距，而不是边框。边距不被视为元素的一部分。您计划如何将边框与其父元素分开？只有当您有一个
父元素
且其中有一个带填充的
子元素
时，才可能将边框与父元素分开。然后，当单击“父项”

时，您只需禁用其子项”@Barmar感谢您的响应，但我如何仅为页边涂上颜色？这将帮助您，谢谢！我想我可以为每个按钮添加一个四分之一圆的父div！是的，这可能是一个好主意，您只需要使用父子场景并通过css更改形状即可满足您的需要。@athul777此场景中的css并不完美，但可能会帮助您以左上角的四分之一圆为例

$(document).ready(function(){
    var flag=false;
    $(".parent").click(function(){
    flag=true;
  });
    $(".child").click(function(e){
    if(flag==false){
        alert("CHILD IS ALIVE");
    }
  });
});