javascript - 如果单击 div 的边框，则防止 div 的单击操作

Question

我正在尝试使用 HTML、CSS 和 Javascript 构建 Simon 游戏的副本。我的设计离最终状态还很远，但我已经有了基本的布局:

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

这是代码中的相关部分:

$(document).ready(function() {
    $('.center-buttons').click(function() {
        event.stopPropagation();
        console.log("Inner Click!");
    });
    
    $('#top-left').click(function() {
        console.log('left click.');
    });
    $('#top-right').click(function() {
        console.log('right click.');
    });
    $('#bottom-left').click(function() {
        console.log('bleft click.');
    });
    $('#bottom-right').click(function() {
        console.log('bright click.');
    });
});

.main-area {
    height: 700px;
    width: 700px;
    border-radius: 50%;
    background-color: ;
    margin: 0px auto;
    padding: 20px;
}

.wrapper {
    position: relative;
    top: -5px;
}

.center-buttons {
    height: 370px;
    width: 370px;
    border: 15px solid #444;
    border-radius: 50%;
    background-color: black;
    margin: 0px auto;
    position: relative;
    top: -550px;
}

#top-row {
    display: flex;
}

#bottom-row {
    display: flex;
}

.main-button {
    height: 310px;
    width: 310px;
    border: 20px solid #444;
}

#top-left{ 
    background-color: #00994d;
    border-radius: 100% 0 0 0;
    right: 50%;
    margin: 0px 5px 5px 0px;
}

#top-right{ 
    background-color: #990000;
    left: 50%;
    border-radius: 0 100% 0 0;
    margin: 0px 0px 5px 5px;
}

#bottom-left {
    background-color: yellow;
    left: 50%;
    border-radius: 0 0 0 100%;
    margin: 5px 5px 0px 0px;
}

#bottom-right {
    background-color: #004d99;
    left: 50%;
    border-radius: 0 0 100% 0;
    margin: 5px 0px 0px 5px;
}

<div class = 'main-area'>
    <div class = 'wrapper'>
        <div id = 'top-row'>
            <div id = 'top-left' class = 'main-button'></div>
            <div id = 'top-right' class = 'main-button'></div>
        </div>
        <div id = 'bottom-row'>
            <div id = 'bottom-left' class = 'main-button'></div>
            <div id = 'bottom-right' class = 'main-button'></div>
        </div>
    </div>

    <div class = 'center-buttons'></div>
</div>

在 CSS 中，每个彩色按钮都有一个粗灰色边框。

主要问题:当任何按钮的边框被点击时，有没有办法阻止相应按钮的点击事件发生。

谢谢。

Answer 1

我尝试用我自己的 HTML 和 CSS 实现，但您可以相应地进行更改。

如果单击了 .parent，我会记下它，然后单击 .child 检查它。

WORKING FIDDLE

HTML

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

</div>
</div>

CSS

.parent{
    display:table-cell;
    width:300px;
    height:300px;
    vertical-align:middle;

    text-align:center;
    padding:15px;
    background-color:red
}
.child{
    display:inline-block;
    width:300px;
    height:300px;
    background-color:blue
}

JQUERY

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