I have an element inside an element, when I click the element underneath I want the slider to open. When I click on the outermost element I want the slider to close.

Unfortunately when I click on the outermost it clicks the underneath element as well. Is there a way to click only on the outermost element ignoring the click on the underneath element? The events are triggered on click and executed with javascript.

I tried with z-index but it still captures the underneath element clicked as well, and because the functions are contrary to one another nothing happens.

edit: on a "code is worth 1000 words" tip

var $target = $(this).data('pos', i) //give each li an index #
    $target.data('hpaneloffsetw', $target.find('.hpanel:eq(0)').outerWidth()) //get offset width of each .hpanel DIV (config.dimensions.fullw + any DIV padding)
    $target[haccordion.ismobile? "click" : "mouseenter"](function(){
        haccordion.expandli(config.accordionid, this)
        config.$lastexpanded=$(this)
    })

    if (config.collapsecurrent){ //if previous content should be contracted when expanding current
        $('.close').click(function(){
            $target.stop().animate({width:config.paneldimensions.peekw}, config.speed) //contract previous content
        })
        $target.dblclick(function(){
            $(this).stop().animate({width:config.paneldimensions.peekw}, config.speed) //contract previous content
        })
    }

Because the code is borrowed, I don't understand much of it. But basically I want the "click" : "mousteenter" function to work on click, without interfering with the .close().click

I have an element inside an element, when I click the element underneath I want the slider to open. When I click on the outermost element I want the slider to close.

Unfortunately when I click on the outermost it clicks the underneath element as well. Is there a way to click only on the outermost element ignoring the click on the underneath element? The events are triggered on click and executed with javascript.

I tried with z-index but it still captures the underneath element clicked as well, and because the functions are contrary to one another nothing happens.

edit: on a "code is worth 1000 words" tip

var $target = $(this).data('pos', i) //give each li an index #
    $target.data('hpaneloffsetw', $target.find('.hpanel:eq(0)').outerWidth()) //get offset width of each .hpanel DIV (config.dimensions.fullw + any DIV padding)
    $target[haccordion.ismobile? "click" : "mouseenter"](function(){
        haccordion.expandli(config.accordionid, this)
        config.$lastexpanded=$(this)
    })

    if (config.collapsecurrent){ //if previous content should be contracted when expanding current
        $('.close').click(function(){
            $target.stop().animate({width:config.paneldimensions.peekw}, config.speed) //contract previous content
        })
        $target.dblclick(function(){
            $(this).stop().animate({width:config.paneldimensions.peekw}, config.speed) //contract previous content
        })
    }

Because the code is borrowed, I don't understand much of it. But basically I want the "click" : "mousteenter" function to work on click, without interfering with the .close().click

• javascript
• jquery

• 6 Code is worth 10000 words, although it sounds like you need to use event.stopPropagation on your click handler. – Rory McCrossan Commented May 6, 2014 at 8:53
• try Delegate api.jquery.com/delegate? – Se0ng11 Commented May 6, 2014 at 8:54
• try e.stopPropagation();. – Sandy Commented May 6, 2014 at 8:57
• @Sandy: howz your comment different from Rory's above? – Abhitalks Commented May 6, 2014 at 8:57
• 1 thank you rory and sandy event.stopPropagation(); worked! – hahaha Commented May 6, 2014 at 8:59

4 Answers 4

It sounds like you need to stop the click event bubbling up the DOM to be caught by parent elements. You can use stopPropagation() to do this:

$('.close').click(function(e) {
    e.stopPropagation();
    $target.stop().animate({ width: config.paneldimensions.peekw }, config.speed);
})
$target.dblclick(function(e) {
    e.stopPropagation();
    $(this).stop().animate({ width: config.paneldimensions.peekw }, config.speed);
})

Try the following fiddle

$("#outer").click(function(){alert("outer clicked")});
$("#inner").click(function(e){
    alert("inner clicked")
    e.stopPropagation();
});

To identify the element you have "really" clicked on, you can try to identify it through accessing the target property of the jquery-event-object.

After you identified the target you clicked on, you could prevent other event handlers from firing.

Use CSS specific jquery to point exact element like below, use > to point exact child

table > tbody > tr > td > input[type='text'] 

like this.