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");
    }
  });
});

Answer 2

实际上，border不是另一个html元素，但它属于div本身。因此，如果在其div上应用了click事件，则无法避免单击边框。如果你真的需要一个宽度的边框，你可以在div中有一个div。保持外部div的背景颜色为内部div的边框颜色和颜色为红色/绿色/蓝色/黄色。然后你可以在内部div上应用click事件来解决你的问题

如果单击div的边框，则阻止div的单击操作

2 个答案: