HTML - one div's child element takes precedence over another div

Question

HTML - one div's child element takes precedence over another div

My HTML page features two consecutive divs. The first div contains a child span that has a relative position, causing it to overlap the second div.

I have implemented click events for both divs. However, when I click on the span that overlaps the second div, it triggers the click event for the first div instead of the intended second div.

Is there a way to ensure that clicking on the overlapping part of the span triggers the click event for the second div?


                function div1Clicked() {
                    alert('div 1 clicked');
                }

                function div2Clicked() {
                    alert('div 2 clicked');
                }


                #div1 {
                  border: 1px solid gainsboro;
                  height: 100px;
                  width: 13%;
                  background: red;
                  display: inline;
                  float: left;
                }

                #div1 span {
                  width: 316px;
                  height: 30px;
                  background: green;
                  float: left;
                  margin-top: 39px;
                  position: relative;
                }

                #div2 {
                  border: 1px solid gainsboro;
                  height: 100px;
                  width: 13%;
                  background: red;
                  display: inherit;
                  float: left;
                }


                <div onclick="div1Clicked()" id="div1">
                  <span>
                    </span>
                </div>

                <div onclick="div2Clicked()" id="div2">
                  <div>
                  </div>
                </div>

javascript jquery html css

Answer 1

Answer №1

If you want to avoid using a hover state on the child span, here's a simple solution. Although it may differ slightly from your current HTML structure, it can easily be converted to fit your needs. Unfortunately, I don't have time to do that right now.

One way to achieve this is by adding :after pseudo-elements to two divs with a higher z-index. These pseudo-elements will overlay the span and serve as trigger areas for your JavaScript functions. The CSS might look a bit unusual due to BEM methodology, but your JavaScript triggers should work smoothly. If you're not comfortable with using console logs, feel free to use alert() for debugging purposes instead.

Check out the DEMO

<div class="block">
  <div class="block__column block__column--left js-action-1"></div>
  <div class="block__column block__column--right js-action-2"></div>

   <div class="block__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, voluptas!</div>
</div>


.block {
  display: flex;
  position: relative;
}

.block__column {
  width: 50%;
  height: 20rem;
  position: relative;
}

.block__column:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.block__column:hover {
  cursor: pointer;
}

.block__column--left {
  background-color: deepskyblue;
}

.block__column--right {
  background-color: deeppink;
}

.block__description {
  position: absolute;
  top: 50%;
  left: 2rem;
  right: 2rem;
  background-color: white;
}


$('.js-action-1').on('click', function() {
 console.log('clicked the left column');
});

$('.js-action-2').on('click', function() {
 console.log('clicked the right column');
});

Answer 2

If you want to avoid using a hover state on the child span, here's a simple solution. Although it may differ slightly from your current HTML structure, it can easily be converted to fit your needs. Unfortunately, I don't have time to do that right now.

One way to achieve this is by adding :after pseudo-elements to two divs with a higher z-index. These pseudo-elements will overlay the span and serve as trigger areas for your JavaScript functions. The CSS might look a bit unusual due to BEM methodology, but your JavaScript triggers should work smoothly. If you're not comfortable with using console logs, feel free to use alert() for debugging purposes instead.

Check out the DEMO

<div class="block">
  <div class="block__column block__column--left js-action-1"></div>
  <div class="block__column block__column--right js-action-2"></div>

   <div class="block__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, voluptas!</div>
</div>


.block {
  display: flex;
  position: relative;
}

.block__column {
  width: 50%;
  height: 20rem;
  position: relative;
}

.block__column:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.block__column:hover {
  cursor: pointer;
}

.block__column--left {
  background-color: deepskyblue;
}

.block__column--right {
  background-color: deeppink;
}

.block__description {
  position: absolute;
  top: 50%;
  left: 2rem;
  right: 2rem;
  background-color: white;
}


$('.js-action-1').on('click', function() {
 console.log('clicked the left column');
});

$('.js-action-2').on('click', function() {
 console.log('clicked the right column');
});

Answer 3

Answer №2

<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div onclick="div1Clicked()" id="div1" style="
    border: 1px solid gainsboro;
    height: 100px;
    width: 13%;
    background: red;
    display: inline;
    float: left;
">
<span style="
    width: 316px;
    height: 30px;
    background: green;
    float: left;
    margin-top: 39px;
    position: relative;
">
</span>
</div>

<div onclick="div2Clicked()" id="div2" style="
    border: 1px solid gainsboro;
    height: 100px;
    width: 13%;
    background: red;
    display: inherit;
    float: left;
">
<div>
</div></div>
<script>
function div1Clicked(){
if($("div:first").width() < event.offsetX)
div2Clicked()
else
alert('div 1 clicked');
}

function div2Clicked(){
alert('div 2 clicked');
}
</script>
</body></html>

When clicking on the span element triggers the parent element's (div1) event, it does not produce the correct output. However, under certain conditions, you can still obtain the expected output. Please see the following code snippet for reference:

function div1Clicked(){
if($("div:first").width() < event.offsetX)
div2Clicked()
else
alert('div 1 clicked');
}

Answer 4

<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div onclick="div1Clicked()" id="div1" style="
    border: 1px solid gainsboro;
    height: 100px;
    width: 13%;
    background: red;
    display: inline;
    float: left;
">
<span style="
    width: 316px;
    height: 30px;
    background: green;
    float: left;
    margin-top: 39px;
    position: relative;
">
</span>
</div>

<div onclick="div2Clicked()" id="div2" style="
    border: 1px solid gainsboro;
    height: 100px;
    width: 13%;
    background: red;
    display: inherit;
    float: left;
">
<div>
</div></div>
<script>
function div1Clicked(){
if($("div:first").width() < event.offsetX)
div2Clicked()
else
alert('div 1 clicked');
}

function div2Clicked(){
alert('div 2 clicked');
}
</script>
</body></html>

When clicking on the span element triggers the parent element's (div1) event, it does not produce the correct output. However, under certain conditions, you can still obtain the expected output. Please see the following code snippet for reference:

function div1Clicked(){
if($("div:first").width() < event.offsetX)
div2Clicked()
else
alert('div 1 clicked');
}

Answer 5

Answer №3

When the green span is clicked, it triggers the click event of div1 even if it overlaps div2. To ensure that the div1 click event is still fired, consider using the onclick event of the green span instead. This will maintain the functionality of firing the div1 click event.

<html><head></head>
<body>
<div onclick="div1Clicked()" id="div1" style="
    border: 1px solid gainsboro;
    height: 100px;
    width: 13%;
    background: red;
    display: inline;
    float: left;
">
<span style="
    width: 316px;
    height: 30px;
    background: green;
    float: left;
    margin-top: 39px;
    position: relative;
" onclick="spanClicked()">
</span>
</div>

<div onclick="div2Clicked()" id="div2" style="
    border: 1px solid gainsboro;
    height: 100px;
    width: 13%;
    background: red;
    display: inherit;
    float: left;
">
<div>
</div></div>
<script>
function div1Clicked(){
alert('div 1 clicked');
}

function spanClicked(){
alert('span clicked');
}

function div2Clicked(){
alert('div 2 clicked');
}
</script>
</body></html>

Answer 6

When the green span is clicked, it triggers the click event of div1 even if it overlaps div2. To ensure that the div1 click event is still fired, consider using the onclick event of the green span instead. This will maintain the functionality of firing the div1 click event.

<html><head></head>
<body>
<div onclick="div1Clicked()" id="div1" style="
    border: 1px solid gainsboro;
    height: 100px;
    width: 13%;
    background: red;
    display: inline;
    float: left;
">
<span style="
    width: 316px;
    height: 30px;
    background: green;
    float: left;
    margin-top: 39px;
    position: relative;
" onclick="spanClicked()">
</span>
</div>

<div onclick="div2Clicked()" id="div2" style="
    border: 1px solid gainsboro;
    height: 100px;
    width: 13%;
    background: red;
    display: inherit;
    float: left;
">
<div>
</div></div>
<script>
function div1Clicked(){
alert('div 1 clicked');
}

function spanClicked(){
alert('span clicked');
}

function div2Clicked(){
alert('div 2 clicked');
}
</script>
</body></html>

Answer 7

Answer №4

If you find that click-events on the span element are unnecessary, one solution is to use `pointer-events: none` in the CSS for the span. This will prevent any clicks on the span from registering.

function div1Clicked() {
  alert('div 1 clicked');
}

function div2Clicked() {
  alert('div 2 clicked');
}

#div1 {
  border: 1px solid gainsboro;
  height: 100px;
  width: 13%;
  background: red;
  display: inline;
  float: left;
}

#div1 span {
  width: 316px;
  height: 30px;
  background: green;
  float: left;
  margin-top: 39px;
  position: relative;
  pointer-events: none;  /*This will make the span click-through*/
}

#div2 {
  border: 1px solid gainsboro;
  height: 100px;
  width: 13%;
  background: red;
  display: inherit;
  float: left;
}

<body>
  <div onclick="div1Clicked()" id="div1">
    <span></span>
  </div>
  <div onclick="div2Clicked()" id="div2">
    <div>
    </div>
  </div>

Answer 8

If you find that click-events on the span element are unnecessary, one solution is to use `pointer-events: none` in the CSS for the span. This will prevent any clicks on the span from registering.

function div1Clicked() {
  alert('div 1 clicked');
}

function div2Clicked() {
  alert('div 2 clicked');
}

#div1 {
  border: 1px solid gainsboro;
  height: 100px;
  width: 13%;
  background: red;
  display: inline;
  float: left;
}

#div1 span {
  width: 316px;
  height: 30px;
  background: green;
  float: left;
  margin-top: 39px;
  position: relative;
  pointer-events: none;  /*This will make the span click-through*/
}

#div2 {
  border: 1px solid gainsboro;
  height: 100px;
  width: 13%;
  background: red;
  display: inherit;
  float: left;
}

<body>
  <div onclick="div1Clicked()" id="div1">
    <span></span>
  </div>
  <div onclick="div2Clicked()" id="div2">
    <div>
    </div>
  </div>

Answer 9

Answer №5

Check out this example below...

$('.first,.second').click(function(){
alert($(this).attr('class'))
})

.first{
    width:200px;
    height:300px;
    background-color:red;
    display:inline-block;
    float:left;
    position:relative;
}
span{
    position:absolute;
    left: 30%;
top: 30%;
}
.first:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.second:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
}
.second{
    width:200px;
    height:300px;
    background-color:green;
    display:inline-block;
    position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="first">
      
    </div>
    <div class='second'>
    </div>
     <span>Hello World....</span>
</body>

Answer 10

Check out this example below...

$('.first,.second').click(function(){
alert($(this).attr('class'))
})

.first{
    width:200px;
    height:300px;
    background-color:red;
    display:inline-block;
    float:left;
    position:relative;
}
span{
    position:absolute;
    left: 30%;
top: 30%;
}
.first:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.second:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
}
.second{
    width:200px;
    height:300px;
    background-color:green;
    display:inline-block;
    position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="first">
      
    </div>
    <div class='second'>
    </div>
     <span>Hello World....</span>
</body>

HTML - one div's child element takes precedence over another div

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Create a fresh array by merging two existing arrays while maintaining the order of values

Using Jquery to insert error messages that are returned by PHP using JSON

Issue encountered with JavaScript AJAX involving a Cross Domain ASMX Web Service JSONP Request

Executing a php function upon onchange event triggered by CKEditor

WebDriver patiently anticipating the completion of page loading amidst ongoing AJAX calls in the background

Issue with jQuery delay() causing animation disruptions

What Occurs to Processed Messages in Azure Functions if Result is Not Output?

Tips for preventing multiple button clicks until the completion of the initial click event

I require adding a new line of information into the database table

Adjust css style based on the current time of day

Establishing a pre-defined value for a filter that impacts an HTML table upon the page's initialization

Dealing with AngularJS: Issue arises when attempting to inject $modal into a controller nested within a directive

Node.js based simplistic static HTML web server

The functionality of JQuery stops functioning once ajax (Node.js, PUG) is integrated

Step-by-step guide on invoking a recursive function asynchronously in JavaScript

The gauge created dynamically using the justgage plugin does not display the value

The persistent space between the navbar and the index page remains despite the suggested fixes provided

Centered Tailwind CSS logo design

Clicking on a JQuery element triggers an AJAX function, although the outcome is not aligned with the intended

Arranging grid elements in Material-UI