How to stop <li> onclick bubble-up...?

Joakim Braun · Dec 7, 2004

I'd like to show tree structures using collapsible multi-level nested <ul>
lists (with open/closed "disclosure triangles" as list-style-images).
Something like this:

<ul>
<li onclick="alert('Level 1 clicked');">Level 1
<ul>
<li onclick="alert('Level 2 clicked');">Level 2
</li>
</ul>
</li>
</ul>

Clicking on the text following <li> (or on the list-style-image)
collapses/expands the rest of the content of that <li> (not shown here).

The problem is that each click bubbles up to the topmost list item. That is,
a click on "Level 2" first executes the innermost <li> onclick handler, then
the one for the next-outer-level <li> and so on. How can I make it so that
only the handler for the <li> that's clicked is executed? (returning false
from onclick didn't help in IE 6)

(I know I could wrap the text in <span>s and add the onclick handlers to
those instead, but that's a bit ugly, and the list-style-image would be out
of action)

Joakim Braun

Michael Winter · Dec 7, 2004

On Tue, 7 Dec 2004 20:37:26 +0100, Joakim Braun

[snip]

The problem is that each click bubbles up to the topmost list item.
[...] How can I make it so that only the handler for the <li> that's
clicked is executed?

You should be able to stop propagation with

if(evt.stopPropagation) {evt.stopPropagation();}
evt.cancelBubble = true;

It's not going to work with NN4, though it should with IE4.

An alternative solution that would work in other situations (but not this
one) is to check the origin of the event. If it matched the current
element, you know you act on that event. If it didn't, ignore the event.
It is possible to see if the target is an immediate child, but I such a
solution would be more likely to work in more browsers than the one above
(I could be wrong, though).

(returning false from onclick didn't help in IE 6)

Returning false may cancel the action of that event, but it won't stop it
propagating.

[snip]

Mike

Joakim Braun · Dec 7, 2004

Michael Winter said:
On Tue, 7 Dec 2004 20:37:26 +0100, Joakim Braun

[snip]

The problem is that each click bubbles up to the topmost list item.
[...] How can I make it so that only the handler for the <li> that's
clicked is executed?

Click to expand...

You should be able to stop propagation with

if(evt.stopPropagation) {evt.stopPropagation();}
evt.cancelBubble = true;

It's not going to work with NN4, though it should with IE4.

<snip>

Thanks, that was helpful. Now to see what Opera says...

(tried tables before, but the non-nestability of <tbody>s (and consequent
use of subtables with multiple spacer columns for indentation) seemed too
hacky)

Joakim Braun

Michael Winter · Dec 7, 2004

"Michael Winter" <[email protected]> skrev i meddelandet

[snip]

if(evt.stopPropagation) {evt.stopPropagation();}
evt.cancelBubble = true;

Click to expand...

[snip]

Thanks, that was helpful. Now to see what Opera says...

Opera supports the DOM Events module, so you'll have no problems there.
Any recent DOM-conforming browser should execute the Event.stopPropagation
method. IE is the reason for the second line.

[snip]

Mike

Joakim Braun · Dec 8, 2004

"Rob B" <[email protected]> skrev i meddelandet

Could always use bubbling to your advantage, by processing click events
at a higher level.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>feh!</title>
<style type="text/css">

there { display: block; }
nowhere { display: none; }

</style>
<script type="text/javascript">
//<![CDATA[

function process(e)
{
e = e || (window.event || {});
var el, tgt = e.srcElement || e.target;
if (tgt && (el = tgt.getElementsByTagName('ul').item(0)))
el.className = 'therenowhere'.replace(el.className, '');
}

onload = function()
{
document.getElementsByTagName('body').item(0).onclick = process;
}

//]]>
</script>
</head>
<body>
<ul>
<li>Level 1
<ul class="nowhere">
<li>Level 2
<ul class="nowhere">
<li>Level 3
</li>
</li>
</ul>
</li>
</ul>
</body>
</html>

How cute - no JS handlers at all in the source code. I'll remember that one.

Joakim Braun

Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Only one table shows up with the information	2	Mar 29, 2023
I need help fixing my website	2	Oct 15, 2023
How to change star rating color on mouseenter, on mouseout, and on onclick	0	Sep 28, 2018
Onclick event in nested list	30	Jun 4, 2009
adding proper functionality to code.Please read comments in code andfirst test it in your browser to	2	Nov 8, 2011
How do I change the li class dynamically using a menu.html includefile?	5	Jan 2, 2008
PHP RSS Feed Aggregator changing to todays date everytime feed is aggregated	1	Jan 11, 2022

How to stop <li> onclick bubble-up...?

Joakim Braun

Michael Winter

Joakim Braun

Michael Winter

Joakim Braun

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads