Question about event bubbling

john · Apr 23, 2004

I1. notice that if you have an onclick event for both the document
and for a particular element, the onclick for the element is called
first and then it bubbles up to the one for the document. Is it
possible to have an onclick event that is at the document level that
is called first? I would like to intercept it there and return false
so that it doesn't bubble down to the element level.

2. On a completely unrelated topic, is it possible to change the
cursor for a Select element (dropdown list)? I can change the cursor
for all my other controls except for that one.

Thanks in advance.

Martin Honnen · Apr 23, 2004

john said:
I1. notice that if you have an onclick event for both the document
and for a particular element, the onclick for the element is called
first and then it bubbles up to the one for the document. Is it
possible to have an onclick event that is at the document level that
is called first? I would like to intercept it there and return false
so that it doesn't bubble down to the element level.

DOM Level 2 event compliant browsers like Mozilla, Netscape 6/7 or Opera
7 allow you to set up capturing event listeners that are called while an
event is propagated down the document tree and there you can stop the
propagation if needed:

<html lang="en">
<head>
<title>event capturing</title>
<script type="text/javascript">
function initEventListeners () {
if (document.addEventListener) {
document.addEventListener(
'click',
function (evt) {
var srcElement = evt.target;
while (srcElement.nodeType != 1) {
srcElement = srcElement.parentNode;
}
if (srcElement.id == 'p1') {
if (evt.stopPropagation) {
evt.stopPropagation();
}
}
},
true
);
}
}
initEventListeners();
</script>
</head>
<body>
<p id="p1"
onclick="alert(event.type + ' at ' + this.id);">
Kibology for all.
Click events shouldn't reach this paragraph.
</p>
<p id="p2"
onclick="alert(event.type + ' at ' + this.id);">
Kibology for all.
Click events should reach this paragraph.
</p>
</body>
</html>

However IE4/5/6 only supports event bubbling up the document tree so
there you can't use that approach.

2. On a completely unrelated topic, is it possible to change the
cursor for a Select element (dropdown list)? I can change the cursor
for all my other controls except for that one.

Try CSS, e.g.
<select style="cursor: pointer;"
some browsers might support that, IE probably not

event bubbling	4	Jul 30, 2011
event bubbling	0	Jul 30, 2011
Event capturing/bubbling problem	3	Jul 23, 2007
Event bubbling...	2	Mar 27, 2007
Can't stop event from bubbling up	7	Sep 26, 2007
Question about my projects	3	Jul 23, 2021
How can I hide a div using an event listener on multiple checkboxes?	6	Dec 23, 2022
Question about multiple metadata files to one file	0	Feb 14, 2022

Question about event bubbling

john

Martin Honnen

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads