Check out my project demo here
Whenever I double click on a child element, it also triggers the parent element at the same time. I want to prevent this behavior so that only the child element is affected by the double click event. Can anyone provide assistance with this? Thank you.
<style>
#parent {
width: 200px;
height: 200px;
position: relative;
border: 1px solid black;
}
#parent:hover {
cursor: pointer;
background: green;
}
#children {
width: 100px;
height: 100px;
position: absolute;
top: 10px;
left: 10px;
border: 1px solid black;
}
#children:hover {
cursor: pointer;
background: blue;
}
</style>
<div id="parent">
<div id="children"></div>
</div>
<script>
$('#children').dblclick(function () {
alert('children');
});
$('#parent').dblclick(function () {
alert('parent');
});
</script>