CODEWITHSUNDEEP
javascriptjqueryhtmlcss
athul777
athul777

Reputation: 207

Prevent click action for div if the border of the div is clicked

I'm trying to build a replica of the Simon game with HTML, CSS and Javascript. The design I have is nowhere near the final state, but I have the basic layout in place: Picture of what I have so far

Each of the colored buttons (Green, Red, Yellow and Blue) have respective click events and I'm testing them out with console.log statements.

Here is the relevant section from the code:

$(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>

In the CSS, each colored button has a thick gray border.

The main question: When the borders of any of the buttons are clicked, is there a way to prevent the click event for the respective button from happening.

Thanks.

Upvotes: 2

Views: 2230

Answers (2)

anand
anand

Reputation: 361

actually, border is not another html element but it belongs to div itself. so, there is no way to avoid a click on border if click event is applied on its div. If you really need a border of that width, you can have a div inside a div,. Keep the background color of outside div to your border color and color of inside div as red/green/blue/yellow. Then you can apply click event on the inside div which will solve your problem

Upvotes: 0

Hemal
Hemal

Reputation: 3760

I have tried to achieve with my own HTML and CSS, but you can change accordingly.

If .parent is clicked, I am taking note of it and then checking it with .child click.

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

Upvotes: 1

Related Questions