CODEWITHSUNDEEP
jqueryhtmlcss
abcid d
abcid d

Reputation: 2953

Stop Clicking through Layer

I have one layer as a background and another layer (icon) sitting on the background layer, both have different functionality.

When I click on the icon, the icon's function works and it works through the background layer, too. This is not expected! How to get the click works on only the icon, not going though the background layer? Thanks.

LIVE CODE

HTML

<div class="redBG">
    <div class="yellowIcon"></div>
</div>

CSS

.redBG{
    background-color:red;
    width: 300px;
    height:30px;
    z-index: 1;
}
.grayBG{
    background-color: gray;
}

.yellowIcon{
    background-color:yellow;
    width: 20px;
    height:20px;
    cursor: pointer;
    z-index:20;
}
.greenBG{background-color:green}

JS

$('.redBG').click(
    function(){
        $(this).toggleClass('grayBG');
    });

$('.yellowIcon').click(
    function(){
        $(this).toggleClass('greenBG');
    }
);

Upvotes: 0

Views: 558

Answers (2)

matthias_h
matthias_h

Reputation: 11416

You can use stopPropagation() like this:

$('.redBG').click(

function () {
    $(this).toggleClass('grayBG');
});

$('.yellowIcon').click(

function (e) {
    e.stopPropagation();
    $(this).toggleClass('greenBG');
});
.redBG {
    background-color:red;
    width: 300px;
    height:30px;
    z-index: 1;
}
.grayBG {
    background-color: gray;
}
.yellowIcon {
    background-color:yellow;
    width: 20px;
    height:20px;
    cursor: pointer;
    z-index:20;
}
.greenBG {
    background-color:green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="redBG">
    <div class="yellowIcon"></div>
</div>

event.stopPropagation() prevents the event from bubbling up the DOM tree. For reference: http://api.jquery.com/event.stoppropagation/

For the question in the comment to explain the e in this function: if you check the provided link to the jQuery API you'll notice that there it's written as follows for the example provided: 

$( "p" ).click(function( event ) {
  event.stopPropagation();
  // Do something
});

Note that it's not necessary to explicitly write function(event) - the parameter of the function in this notation is the click() event. Many people just tend to shorten event with e as the stopPropation() is just called upon the event that is the parameter of the function() called in click(function(){});.

For illustration I've just added the console log message console.log(e); in this Fiddle for the click() event. When you click on the .yellowIcon, you'll notice the console message 

Object { originalEvent=Event click, type="click", ....}

So e is just the passed click() event object.
If you change the click() to e.g. hover(), the console message is

Object { originalEvent=Event mouseover, type="mouseenter", ...}
Object { originalEvent=Event mouseover, type="mouseleave", ...}

For further and more detailed information you can check http://api.jquery.com/category/events/event-object/

Upvotes: 1

Jeremy Blalock
Jeremy Blalock

Reputation: 2619

Change the $('.yellowIcon').click() function:

$('.yellowIcon').click(
    function(e){
        e.stopPropagation();
        $(this).toggleClass('greenBG');
    }
);

Upvotes: 0

Related Questions