У меня есть родитель <div />
, который занимает всю страницу. В рамках этого родителя <div />
у меня рождается меньший ребенок <div />
. Я не хочу, чтобы дочерний элемент <div />
был кликабельным, когда родитель <div />
перекрывает дочерний элемент `.
function parentFunction(event) {
if (document.getElementById("check").checked) {
event.stopPropagation();
}
}
function childFunction() {
alert("CHILD");
}
.child {
padding: 50px;
width: 100px;
height: 100px;
background-color: hotpink;
text-align: center;
cursor: pointer;
}
.parent {
width: 500px;
height: 500px;
filter: blur(2px);
display: flex;
justifc-content: center;
align-items: center;
align-content: center;
background-color: lightgray;
}
<body>
<div
onclick = "parentFunction(event)"
class = "parent">
<div
onclick = "childFunction()"
class = "child">
Child
</div>
</div>
</body>
Stop propagation:
<input type = "checkbox" id = "check">
@David Позвольте мне уточнить: я не могу удалить функцию у ребенка <div />
. Что я хочу: когда на дочерний элемент накладывается прент, я не хочу, чтобы дочерний элемент (ы) был кликабельным. Щелчок должен быть зафиксирован на уровне родительского элемента div.
родитель не может перекрывать дочерний элемент. что родитель может сделать, так это добавить еще один прозрачный дочерний элемент сверху. этот новый ребенок проглотит эти события щелчка. Обратите внимание: если вы можете изменить CSS, вы можете добавить pointer-events: none
для первого дочернего элемента, и тогда вам больше ничего не понадобится (но события клавиатуры и фокус по-прежнему будут возможны)
The click should be captured on the level of the parent div.
затем вам нужно прослушать событие на родительском этапе на этапе захвата. Или предотвратите любые события указателя на уровне родителя, используя css.
Как родитель может «перекрывать» дочерний — дочерний находится внутри родителя. вообще непонятно в чем тут дело
Как было сказано ранее, распространение идет от ребенка к родителю, а не наоборот.
Ваши возможности:
или
Вот решение, которое, вероятно, удовлетворит ваши потребности.
Когда вы нажимаете на Parent, который содержит дочерний элемент внутри, он сообщает вам, какой элемент был нажат. Затем вы можете перейти к месту назначения/решению, которое вам требуется в функциональности.
document.querySelector(".parent").addEventListener("click", parentFunction)
function parentFunction(e) {
if (document.getElementById("check").checked && e.target == document.querySelector(".child")) {
e.stopPropagation();
console.info("EXIT")
return;
}
console.info("PARENT says target is: ", e.target)
}
body {
display: flex;
justifc-content: center;
align-items: center;
flex: 1;
width: 100vh;
height: 100vw;
}
.child {
padding: 50px;
width: 100px;
height: 100px;
background-color: hotpink;
text-align: center;
cursor: pointer;
}
.parent {
width: 500px;
height: 500px;
filter: blur(2px);
display: flex;
justify-content: center;
align-items: center;
align-content: center;
background-color: lightgray;
cursor:pointer;
}
<body>
<div
class = "parent">
<div
class = "child">
Child
</div>
</div>
</body>
Stop propagation:
<input type = "checkbox" id = "check">
Наоборот, когда вы нажимаете на child
, вы не хотите, чтобы событие распространялось на родителя, который перекрывает его, поэтому вместо этого должно быть:
function parentFunction(event) {
console.info("PARENT");
}
function childFunction() {
if (document.getElementById("check").checked) {
event.stopPropagation();
}
console.info("CHILD");
}
.child {
padding: 50px;
width: 100px;
height: 100px;
background-color: hotpink;
text-align: center;
cursor: pointer;
}
.parent {
width: 500px;
height: 500px;
filter: blur(2px);
display: flex;
justify-content: center;
align-items: center;
align-content: center;
background-color: lightgray;
}
<body>
<div onclick = "parentFunction(event)" class = "parent">
<div onclick = "childFunction()" class = "child">
Child
</div>
</div>
</body>
Stop propagation:
<input type = "checkbox" id = "check">
Родитель не передает события дочернему элементу. На дочерний элемент нажимают, и он может распространяться или не распространяться на родителя. Если вы просто полностью удалите
onclick = "childFunction()"
, то в этом случае при нажатии на дочерний элемент ничего не произойдет. Хотя я подозреваю, что реальная проблема, которую вы пытаетесь решить, может быть представлена здесь неточно.