HTML and CSS Reference
In-Depth Information
returnValue property is set to false or the function itself can return false. This tells the runtime
to stop any further processing of the event. The following code demonstrates this:
window.onload = function () {
var a = document.getElementById("aLink");
a.onclick = OverrideAnchorClick;
}
function OverrideAnchorClick() {
//do custom logic for the anchor
window.event.returnValue = false;
//or
//return false;
}
In this case, when the anchor is clicked, the custom event handler runs but no further logic
is processed. Hence, the navigation typically provided by the < a > element is prevented from
running. Another aspect to consider is the order in which events run when you are working
with a nested DOM element. In this case, the concept that is dealt with is event bubbling.
Declaring and handling bubbled events
Event bubbling is the concept that applies when the HTML document has nested elements.
Consider the following HTML example:
<style>
#outer {
width: 200px;
height: 200px;
background-color: red;
}
#middle {
width: 50%;
height: 50%;
position: relative;
top: 25%;
left: 25%;
background-color: green;
}
#inner {
width: 50%;
height: 50%;
position: relative;
top: 25%;
left: 25%;
background-color: blue;
}
</style>
<script>
window.onload = function () {
document.getElementById("outer").addEventListener("click", outerDivClick, false);
document.getElementById("middle").addEventListener("click", middleDivClick, false);
document.getElementById("inner").addEventListener("click", innerDivClick, false);
document.getElementById("clearButton").addEventListener("click", clearList);
}
function outerDivClick() {
 
Search WWH ::




Custom Search