How do I select only the <body> element's background whitespace for a Javascript onclick callback?
Question
I need to create a callback that allows me to click or double click the background of my webpage, to return it to its default layout (thereby, closing and returning things so far affected by event callbacks). If I add an onclick callback to my <body> element, it is called whenever I click higher-level elements, not just on the background. So, it is available everywhere. How do I ensure that only the lowest-level element (ie the background whitespace) can call the reset function?
2 answers
solution1
0 2021-01-08 05:51:19
You need to do event propagation stop technique . So that you stop your event from going up the DOM tree.
One such method is event.stopPropagation();
Do also look Event Delegation , this may also help depending on your requirement.
The idea is that if we have a lot of elements handled in a similar way, then instead of assigning a handler to each of them – we put a single handler on their common ancestor.
In the handler we get
event.targetto see where the event actually happened and handle it.
In your case I believe You may require Event Delegation technique along with stopPropagation
solution2
0 2021-01-08 07:20:39
I would suggest you have 2 elements background div and the inner div which will contain all the content of your webpage
<body>
<!-- the clickable background -->
<div class="background-container" onclick="reset()" id="background"></div>
<!-- Your webpage -->
<div class="webpage">
<h3>This is your webpage</h3>
</div>
</body>
CSS - to make the background fullscreen
.background-container{
background-color: #4158D0;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* Use z-index to put the background behind your webpage */
z-index: 0;
}
.webpage{
/* positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). */
position: absolute;
/*setting the z-index to one to bring it to front*/
z-index: 1;
}
h3{
font-size: 40px;
color: white;
font-family: 'Roboto';
}
Javascript - to make the background clickable and run the function reset() This function will be triggered when the background is clicked you can edit the function to fit your purpose
function reset(){
var colors = ["#4158D0", "#C850C0", "#FFCC70"];
document.querySelector('#background').style.cssText = `background-image: linear-gradient(43deg, ${colors[Math.floor(Math.random() * 3)]}, ${colors[Math.floor(Math.random() * 3)]}, ${colors[Math.floor(Math.random() * 3)]},${colors[Math.floor(Math.random() * 3)]},${colors[Math.floor(Math.random() * 3)]})`
}
For this demo the reset() function will change the background color Here is the codepen https://codepen.io/Alemalohe/pen/MWjBwOd
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.