CODEWITHSUNDEEP
javascriptjqueryhtml
mlewis54
mlewis54

Reputation: 2380

How to embed a clickable div inside another clickable div

In a previous question I asked about toggling a child div from the parent which was answered and the answer given works. Now I have a different issue: When I click anywhere within the inner (such as the link "inside inner div" it causes the outer div to toggle. I want the inner div to toggle only by itself. If I click as described, then div containing "This is the inner div" should disappear but the class openData should be active for the outer div. Instead it gets set to closeData.

This is my code:

<html>
<head>
<style>
.openData{font-size:18px;background-color:lightgreen;color:blue;}
.closeData{font-size:18px;background-color:lightblue;color:blue;)
</style>
<script src="/js/jquery.js"></script>
<script>
function insideDiv(f) {
    var e=window.event;
    e.cancelBubble=true;
    e.stopPropagation();
    toggleDiv(f);
    return false;
}
function setCursor(e) {
        e.style.cursor="pointer";
}
function clearCursor(e) {
        e.style.cursor="default";
}
function togglePlusMinus(f) {
        $(f).children('div:first').toggle();
        $(f).toggleClass("openData closeData");
}
</script>
</head>
<body>
<div class="closeData" onmouseover="setCursor(this);" onmouseout="clearCursor(this);" onclick="togglePlusMinus(this);">This is the outer div                                                 
<p>Inside outer div</p>
<div style="display:none;;background-color:#ffffff;" onclick="insideDiv(this);">This is the inner div
<div>
<p style="margin-left:20px;margin-top:0px;font-size:15px">inside inner div</p>          
</div>
</div>
<p>Also in outer div</p>
</div>
This is just some trailing text.
</body>
</html>

Everything I've read says that I need to stop the click propagation (which I think I am doing correctly).

This is the smallest working failure example. The actual program shows expandable data sets nested within each other.

Upvotes: 0

Views: 4116

Answers (3)

Lauromine
Lauromine

Reputation: 1493

Try adding an eventListener to your inner div and use stopPropagation like in the parent.

var myDiv =  document.querySelector('#myDiv'); //assuming your child div has a "myDiv" id
myDiv.addEventListener(pEvent) {
    pEvent.stopPropagation();
};

EDIT : To make it work with every first child div of each .closeData element you can do (assuming you have only one direct child div): 

//Selects all .closeData elements
var parents = document.querySelectorAll('.closeData');

//For each .closeData, find the first div and stops the propagation
for(var i = 0; i < parents.length; i++) {
    var child = parents[i].querySelector('div');
    child.addEventListener('click', function(pEvent) {
        pEvent.stopPropagation();
    })
}

Upvotes: 3

Brad Decker
Brad Decker

Reputation: 756

If only the outer div function is firing try setting a z-index on the inner div that is higher than the parent div.

Explicitly pass event to your function such that 

Onclick="function(event || window.event, this)"

Then add a a param for the event on your function and do event propagation cancelation on that.

Upvotes: 0

Maksim Luzik
Maksim Luzik

Reputation: 6723

Edit: it seems that the problem is that you are calling stopPropagation to the window event, not the actual element that you are clicking.

You are looking most likely for the event bubbling tutorial (at least if I understood correctly). Please check this out as it describes your problem:

http://javascript.info/tutorial/bubbling-and-capturing

And in shorthand to stop the inner event to propagate to outer div use:

event.stopPropagation()

and for IE9 earlier:

event.cancelBubble = true

Upvotes: 0

Related Questions