Menu
thanks for reading... I'll get right into the issue.
I have an onclick function attached to an image.
<div id="mercury" onclick="displayCreations()">
Javascript function:
function displayCreations(){
document.getElementById("projects").style.display = "block";
}
The div I'm displaying as a block is set to none once you arrive at the page. This function sets the display to block, which works.
I'm having trouble with making an onclick function for an image inside the div that sets the display value back to none. This doesn't seem to work with my current code...
HTML:
<div id="mercury" onclick="displayCreations()">
<img id="exit" onclick="hideCreations()" src="./assets/images/exit.png" alt="exit button" title="Leave Planet: Mercury" />
<div id="projects">
<h3>No creator here, but it looks like you've found some his wonderous creations...</h3>
<ol>
<li>Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
</ol>
</div>
</div>
Javascript:
function displayCreations(){
document.getElementById("projects").style.display = "block";
}
function hideCreations(){
document.getElementById("projects").style.display = "none";
}
When I run this site on google chrome and click the 'exit' button, nothing happens and nothing is displayed in the error messages.
This link leads you to a well-known site, Gyazo, where you can find a gif of what I see on my end.
Link: Link
I'd prefer a javascript solution for my current code, and perhaps you can explain to me why this is happening so I don't get into the same situation again.
885
When an event happens on an element, the event handler attached to that element runs first, then parent's handler and followed by all other ancestors' handlers. This is what bubbling in JavaScript is. Let's understand it better with the help of a simple example.
Quick Tip: Click Table Row to Trigger a Checkbox Click Stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event. Prevents the browser from executing the default action. Use the method isDefaultPrevented to know whether this method was ever called (on that event object).
Once an inner child element’s event is called, all elements above/below it will also be called (bubbling/capturing). To stop this from happening , a method on the event object must be called. Bubbling and capturing (explained later) allow us to implement the event delegation pattern.
Then on the outer <div>. Then on the outer <form>. And so on upwards till the document object. So if we click on <p>, then we’ll see 3 alerts: p → div → form. The process is called “bubbling”, because events “bubble” from the inner element up through parents like a bubble in the water. Almost all events bubble.
It is caused due to event bubbling.Triggering an event on child propagates upward toward its parent.In your case click event on image also triggers click event on parent div.use event.stopPropagation() to prevent this from happening.
HTML :
pass the event as parameter to event listener function
<img id="exit" onclick="hideCreations(event)" src="./assets/images/exit.png" alt="exit button" title="Leave Planet: Mercury" />
JS:
Capture the event and call it's stopPropagation method
function hideCreations(event){
event.stopPropagation()
document.getElementById("projects").style.display = "none";
}
A very useful solution from AL-zami. It's also useful outside the function e.g. onclick="event.stopPropagation();yourFunction(existing parameterset)". So You don't need to change yourFunction and it's parmeterlist, nor the other calls of it in the code. It's even possible to create an extra container (e.g. div) around different events to prevent bubbling. e.g.:
<div id="picBigOLL" onclick="previousPict();">
<div id="picBigPlay" onclick="event.stopPropagation();">
<div id="playButsBox">
<div id="bPPlayL" onclick="diaPB(-1)">
⯇
</div>
<div id="bPPlayS" onclick="diaPB(0)">
||
</div>
<div id="bPPlayR" onclick="diaPB(1)">
⯈
</div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With