avoid double events (onclick) with nested ul / li

Question

I have a two-level ul/li menu where the li can fire of different onclick-events.

It seems as the parent-event (ul li), is fired when clicking one ul li ul li-item.

Can I avoid this an easy way.

(I'm considering using timer to trap second event, but think of it as an ugly fix...)

Regards, /T

are you using straight javascript or a js library to set events? — , Nov 12 '10 at 12:04

score 10 · Accepted Answer · answered Nov 12 '10 at 12:07

10

I suppose you have to stop the event bubbling so if you are using straight javascript you have event.cancelBubble = true

otherwise if you're using jQuery you have event.stopPropagation() or event.stopImmediatePropagation()

answered Nov 12 '10 at 12:07

2

cancelBubble is non standard (internet explorer) although it seems some other browsers support it. To be correct you should also use `event.stopPropagation()` if it is available – meouw Nov 12 '10 at 12:22

score 0 · Answer 2 · answered Sep 02 '20 at 20:39

Instead of event.stopPropagation() consider:

function myFunction() {
    if (event.myFunctionResolved == undefined) {
        event.myFunctionResolved = true;

        // your logic here
    }
}

The advantage here is that the event won't be stopped and hence other scripts that might be listening for that event will be executed.

2 Answers2