When the pointer events for table data are disabled, the table row (<tr>) will not be able to receive any pointer events

Question

When the pointer events for table data are disabled, the table row (<tr>) will not be able to receive any pointer events

I have a basic table with different data displayed in rows and columns. I want to make the entire row clickable so that when clicked, something happens.

By default, the <td> elements inside the table act as event targets, but I specifically want only the table row to be the target for the click event. To achieve this, I tried the following:

td {
  pointer-events: none;
}

tr {
  cursor: pointer;
}

Although this approach worked fine when using <div> tags containing <span> elements, it doesn't behave the same way with <tr> and <td>. Even after adding pointer events, the table row still does not respond to any click events.

Is there anyone who knows of a workaround or solution to this problem?

javascript html css

Answer 1

Answer №1

According to the information provided on MDN

none

The element will not be the main target for mouse events; however, its descendant elements can still receive mouse events if they have different pointer-events values set. In such cases, event listeners attached to this parent element may respond accordingly as the events propagate through the descendant elements during capture/bubble phases.

By disabling pointer-events on td elements, clicking directly on the td itself (instead of the margin around it within the tr) won't register any action.

Instead, you can bind a click event to the tr, or even higher up in the hierarchy like the tbody or table. Here's an example:

document.querySelector("table").addEventListener("click", function(e) {
    // Check if click occurred on a tr within this table
    var tr = e.target.closest("tr");
    if (tr && this.contains(tr)) {
      // Toggle highlight if yes
      tr.classList.toggle("highlight");
    }
  });

.highlight {
    background-color: yellow;
  }

<table>
    <tbody>
      <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
      </tr>
      <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
      </tr>
      <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
      </tr>
    </tbody>
  </table>

(The contains part ensures that clicks outside of a tr within this table are not captured.)

For additional reference:

Answer 2

According to the information provided on MDN

none

The element will not be the main target for mouse events; however, its descendant elements can still receive mouse events if they have different pointer-events values set. In such cases, event listeners attached to this parent element may respond accordingly as the events propagate through the descendant elements during capture/bubble phases.

By disabling pointer-events on td elements, clicking directly on the td itself (instead of the margin around it within the tr) won't register any action.

Instead, you can bind a click event to the tr, or even higher up in the hierarchy like the tbody or table. Here's an example:

document.querySelector("table").addEventListener("click", function(e) {
    // Check if click occurred on a tr within this table
    var tr = e.target.closest("tr");
    if (tr && this.contains(tr)) {
      // Toggle highlight if yes
      tr.classList.toggle("highlight");
    }
  });

.highlight {
    background-color: yellow;
  }

<table>
    <tbody>
      <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
      </tr>
      <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
      </tr>
      <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
      </tr>
    </tbody>
  </table>

(The contains part ensures that clicks outside of a tr within this table are not captured.)

For additional reference:

When the pointer events for table data are disabled, the table row (<tr>) will not be able to receive any pointer events

Answer №1

Similar questions

Unable to display a cube using Three.js on a custom WebGL layer in Mapbox GL JS

Incorporating transparent padding to PNG images for a three-dimensional effect

Numerous slideshows using identical scripts

JavaScript failing to load following PHP header() redirect

HTML validation produces mistakes

Is there a way to position a pseudoelement behind its parent yet still in front of its grandparent using absolute positioning?

Singularize button/solo in the center

An issue has occurred while trying to execute the npm start command within PhpStorm

Developing a Cloud Function for Stripe that is taking forever to finalize writing data to Firestore

Design interactive diagrams in React js with the help of Fluent UI

Tips for Importing HTML Table Data Line by Line into SQL Table

How can you insert a title or key into an array containing numerous objects using javascript?

Problem with the visibility of the drop-down menu when hovering over it

Is the function failing to generate an input field?

Experiencing the dreaded "Syntax Error: Unexpected Token" message while trying to execute a function via ajax

Access language options in the dropdown menu using keyboard shortcuts

Using Java's Selenium WebDriver to select and click on an item in a list

Adding elements to an array in jQuery by pushing them

Tips for patiently waiting for a series of asynchronous calls to successfully complete

What steps can I take to personalize Material UI within a React application?