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

loading a codeigniter page via AJAX calls

Error: Preflight request returned a 405 HTTP status code when querying Ionic + CI backend

Only allow scrolling if the number of child elements exceeds a certain limit

Angular 4: Unhandled error occurred: TypeError - X does not exist as a constructor

"Utilizing multiple callbacks with the jQuery .post method for AJAX requests

"Proceeding without waiting for resolution from a Promise's `.then`

How can I make my navbar stay fixed in place and also activate the transform scale functionality?

What is the method for creating a new array of objects in Typescript with no initial elements?

Auto Suggest: How can I display all the attributes from a JSON object in the options list using material-ui (@mui) and emphasize the corresponding text in the selected option?

Is there a convenient HTML parser that is compatible with Nativescript?

Firebase Error: Trying to access properties of null object (indexOf)

The error message received states: "materialize-css Uncaught TypeError: Vel is not defined as

Having trouble clicking or interacting with JavaScript using Selenium and Python

The values of variables persist even after refreshing the page

Next.js 13 app directory experiences 404 Not Found error due to dynamic routing issues

Ways to verify if TypeScript declaration files successfully compile with local JavaScript library

Troubleshooting Node.js TypeScript breakpoints in Visual Studio Code

Using jQuery Datatables with Asp.Net

Utilizing ReactJS to creatively overlay a video on top of an image with the option to

Can the parcel bundler dist folder be customized for decoration?