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

Question

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:

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.

Instead of a border, use a margin. The margin isn't considered part of the element. — Barmar, Dec 30 '15 at 05:47
Its only possible when you have one `Parent` element and inside that you have a `child` element with padding, so that it looks like border. Then when `parent` is clicked, you just disable its `child`. — Hemal, Dec 30 '15 at 05:49
@Barmar thanks for your response, but how do I color only the margin? — athul777, Dec 30 '15 at 05:55
@athul777 Sorry, I was wrong, you can't specify color for margins. — Barmar, Dec 30 '15 at 05:57
This will help you http://stackoverflow.com/questions/24217266/jquery-click-on-border-of-a-div — Suresh Ponnukalai, Dec 30 '15 at 05:57
@Hemal thanks for your response, but if I add a parent element for each button and add a size and border for the parent element, I wont be able to achieve the shape I want in the child element, right? — athul777, Dec 30 '15 at 06:00
I have posted an answer with FIDDLE, though its not using your code, but you have to figure it out with your shape's HTML and CSS. — Hemal, Dec 30 '15 at 06:01
@SureshPonnukalai, thanks! This looks exactly like what I need! — athul777, Dec 30 '15 at 06:02

score 1 · Accepted Answer · answered Dec 30 '15 at 05:59

1

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

answered Dec 30 '15 at 05:59

Hemal

3,682
1
23
54

Thanks! I think I can add a parent div that is a quarter circle to each of the buttons! – athul777 Dec 30 '15 at 06:04
Yes, that might be a good idea, you just need to use parent-child scenario and change shape via css for that to achieve your need. – Hemal Dec 30 '15 at 06:05
@athul777 The css on this isn't perfect, but maybe it will help http://codepen.io/alex-wilmer/pen/mVOxEz?editors=110 just did the top left quarter circle as an example – azium Dec 30 '15 at 06:22

score 0 · Answer 2 · answered Dec 30 '15 at 06:02

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

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

2 Answers2