topic description
as described in the title
sources of topics and their own ideas
this is an abstraction of a problem encountered at work. The reason for this problem is that when I was looking at this piece at that time, I naturally thought that if the child element of the parent element had been separated from the document (position: fixed / absolute), then he should no longer belong to the parent element. After all, he didn"t even want his ancestors. However, my practice has found that as long as I add event listener to the parent element, events will be triggered on the child element regardless of whether the child element is detached from the document or not. So, I wonder if you can just modify the CSS, so that the child elements that are detached from the document do not do event handling.
related codes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.circle {
width: 100%;
height: 400px;
border: 1px solid -sharpfdfdfd;
border-radius: 50%;
background-color: rgba(42, 34, 34, 0.08);
}
.play {
position: fixed;
z-index: 100;
display: block;
width: 300px;
height: 300px;
background: -sharp666;
margin: auto;
overflow: hidden;
vertical-align: middle;
border: 20px solid transparent;
border-width: 12px 21px;
border-left-color: -sharpfff;
}
</style>
<body>
<div class="circle">
<span class="play"></span>
</div>
</body>
<script>
var circle = document.querySelector(".circle");
circle.addEventListener("click",function() {
console.log("clicked");
});
</script>
</html>
what result do you expect? What is the error message actually seen?
in the above code, the circle element is a circle, and the play element away from the document is a square. I want to change CSS, only when clicking on the circular part (excluding the part covered by the square), it will print "clicked" on the browser command line, and when clicking on the square, there will be no log printing.