Exploring z-indices in event bubbling

Question

Exploring z-indices in event bubbling

JSFiddle: https://jsfiddle.net/uLap7yeq/19/

Issue

Let's examine a scenario where there are two elements, canvas and div, positioned in the same location using CSS. The div has a higher z-index compared to the canvas, but how can we make sure events triggered on the div get passed down to the lower z-indexed element? Is it necessary to use .dispatchEvent() on the canvas?

UPDATE: Just to clarify, I want the div to handle the event first, perform its actions, and then pass the event along to the next element with a lower z-index.

The JSFiddle code provided below:

/*
     How can I pass the event along to #canvas?
    */
$('#container').on('click', function(e) {
  console.log('#container click');
});
$('#canvas').on('click', function(e) {
  console.log('#canvas click');
});
$('#other-div').on('click', function(e) {
  console.log('#other-div click');
});

#other-div {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}

#canvas {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="other-div">
    <p>
      Something
    </p>
  </div>
  <canvas id="canvas" width="200" height="200"></canvas>
</div>

javascript jquery html css

Answer 1

Answer №1

By adding the CSS property pointer-events: none; to the #other-div, you can allow clicks and other pointer-related events to pass through the div, reaching both the canvas and the container.

#other-div {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

For a demonstration, check out Fiddle 1.

If the above solution is not suitable because you require the other-div to also capture the event, as per your comment, then you can programmatically trigger an event on the canvas when the container is clicked.

$('#container').on('click', function(e) {
  console.log('#container click');
  $('#canvas').click(); // <------
});
$('#canvas').on('click', function(e) {
  e.stopImmediatePropagation(); // <------
  console.log('#canvas click');
});
$('#other-div').on('click', function(e) {
  console.log('#other-div click');
});

When the container receives a click, it will automatically trigger a click on the underlying canvas: $('#canvas').click();

It's important to note that when the click reaches the canvas, the event must be stopped from propagating to prevent an infinite loop that would hit both the #other-div and the #container. This is why we have e.stopImmediatePropagation();

For a visual representation, see Fiddle 2.

Answer 2

By adding the CSS property pointer-events: none; to the #other-div, you can allow clicks and other pointer-related events to pass through the div, reaching both the canvas and the container.

#other-div {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

For a demonstration, check out Fiddle 1.

If the above solution is not suitable because you require the other-div to also capture the event, as per your comment, then you can programmatically trigger an event on the canvas when the container is clicked.

$('#container').on('click', function(e) {
  console.log('#container click');
  $('#canvas').click(); // <------
});
$('#canvas').on('click', function(e) {
  e.stopImmediatePropagation(); // <------
  console.log('#canvas click');
});
$('#other-div').on('click', function(e) {
  console.log('#other-div click');
});

When the container receives a click, it will automatically trigger a click on the underlying canvas: $('#canvas').click();

It's important to note that when the click reaches the canvas, the event must be stopped from propagating to prevent an infinite loop that would hit both the #other-div and the #container. This is why we have e.stopImmediatePropagation();

For a visual representation, see Fiddle 2.

Answer 3

Answer №2

If you want to create a custom event triggered by clicking on the outer-div, you can have the canvas listen for this event:

$('#container').on('click', function(e) {
  console.log('#container click');
});
$('#canvas').on('click custom', function(e) {
  console.log('#canvas click');
});
$('#other-div').on('click', function(e) {
  console.log('#other-div click');
  $('#canvas').trigger( "custom");
});

#other-div {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  background:rgba(255,0,0,0.2);
}

#canvas {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  background:rgba(255,255,0,0.2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="other-div">
  <p>
   Something
  </p>
  </div>
  <canvas id="canvas" width="200" height="200"></canvas>
</div>

Answer 4

If you want to create a custom event triggered by clicking on the outer-div, you can have the canvas listen for this event:

$('#container').on('click', function(e) {
  console.log('#container click');
});
$('#canvas').on('click custom', function(e) {
  console.log('#canvas click');
});
$('#other-div').on('click', function(e) {
  console.log('#other-div click');
  $('#canvas').trigger( "custom");
});

#other-div {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  background:rgba(255,0,0,0.2);
}

#canvas {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  background:rgba(255,255,0,0.2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="other-div">
  <p>
   Something
  </p>
  </div>
  <canvas id="canvas" width="200" height="200"></canvas>
</div>

Answer 5

Answer №3

One way to implement a dynamic solution is by modifying the Element prototype:

if (!document.elementsFromPoint) {
    document.elementsFromPoint = elementsFromPoint;
}

function elementsFromPoint(x, y) {
    var parents = [];
    var parent = void 0;
    do {
        if (parent !== document.elementFromPoint(x, y)) {
            parent = document.elementFromPoint(x, y);
            parents.push(parent);
            parent.style.pointerEvents = 'none';
        } else {
            parent = false;
        }
    } while (parent);
    parents.forEach(function (parent) {
        parent.style.pointerEvents = 'initial';
    });
    return parents;
}

Element.prototype.makeEventGoThrough = function(eventName) {
  $(this).on(eventName, (e) => {
    var elements = document.elementsFromPoint(e.clientX, e.clientY);
    var children = [].slice.call(this.children);
    elements = elements.filter(element => element !== this && !children.find(el => el === element));
    elements.forEach(element => $(element).trigger(eventName));
  });
}


/*
 How can I pass the event along to #canvas?
*/
document.getElementById('other-div').makeEventGoThrough('click');
$('#other-div').on('click', () => console.log('other-div clicked'));
$('#canvas').on('click', () => console.log('canvas clicked'));

#other-div {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}

#canvas {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="other-div">
  <p>
   Something
  </p>
  </div>
  <canvas id="canvas" width="200" height="200"></canvas>
</div>

Answer 6

One way to implement a dynamic solution is by modifying the Element prototype:

if (!document.elementsFromPoint) {
    document.elementsFromPoint = elementsFromPoint;
}

function elementsFromPoint(x, y) {
    var parents = [];
    var parent = void 0;
    do {
        if (parent !== document.elementFromPoint(x, y)) {
            parent = document.elementFromPoint(x, y);
            parents.push(parent);
            parent.style.pointerEvents = 'none';
        } else {
            parent = false;
        }
    } while (parent);
    parents.forEach(function (parent) {
        parent.style.pointerEvents = 'initial';
    });
    return parents;
}

Element.prototype.makeEventGoThrough = function(eventName) {
  $(this).on(eventName, (e) => {
    var elements = document.elementsFromPoint(e.clientX, e.clientY);
    var children = [].slice.call(this.children);
    elements = elements.filter(element => element !== this && !children.find(el => el === element));
    elements.forEach(element => $(element).trigger(eventName));
  });
}


/*
 How can I pass the event along to #canvas?
*/
document.getElementById('other-div').makeEventGoThrough('click');
$('#other-div').on('click', () => console.log('other-div clicked'));
$('#canvas').on('click', () => console.log('canvas clicked'));

#other-div {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}

#canvas {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="other-div">
  <p>
   Something
  </p>
  </div>
  <canvas id="canvas" width="200" height="200"></canvas>
</div>

Exploring z-indices in event bubbling

Answer №1

Answer №2

Answer №3

Similar questions

Can someone help me figure out this lengthy React error coming from Material UI?

Creating an interactive checkbox input field utilizing a JSON-driven database

Utilizing Font Awesome icons dynamically presents challenges when integrating with SVG & JavaScript

What is the best way for a background-image to determine its height in CSS?

Generating a dataframe with cells that have a combination of regular and italicized text using the sjPlot package functions

utilizing array.map() to nest multiple layers of arrays

JavaScript code encounters a math calculator script error

Is there a way to deactivate the onClick event when the dropdown placeholder is chosen?

Unable to identify the pdf file using multer in node.js

Using the tensorflow library with vite

Image that adjusts its size according to the device screen width while

What is the best way to create a form that includes both dynamic objects and dynamic arrays using a JSON schema?

Flask fails to recognize JSON data when transmitted from Nodejs

Adaptable design tailored for smartphones

Finding elements based on their class can be accomplished by using XPath

Navigating within a React application - rendering JSX components based on URL parameters

The GET request on the Express route is malfunctioning, causing the Postman request to time out after getting stuck for some

Equal spacing title in horizontal menu with Bootstrap design

The comparison between local variables and data can result in a significant drop in performance

Transforming into an input field from a dropdown with Bootstrap select when using AJAX in js.erb