CSS 指针事件也可以禁用对底层元素的点击

Posted

技术标签:

【中文标题】CSS 指针事件也可以禁用对底层元素的点击【英文标题】:CSS pointer-events to disable clicks on underlying elements too 【发布时间】:2015-03-22 23:51:51 【问题描述】:

我想禁用触发 tr 标签上悬停的行为,特别是在带有单词“COLUMNA”的空间上。

奇怪的是,谷歌浏览器显然禁止点击底层元素,你可以在 Chrome 上运行代码,它具有我需要的确切行为,但在 Firefox 上,当我将光标放在有单词的空间上时,它确实会触发悬停“列”。

我将如何解决这个问题以使行为在 Chrome 上显示,但在 FireFox 上显示?

这是我的代码:

.formato 
  border: 1px solid #000;
  border-collapse: collapse;
  margin-left: 100px;
  margin-bottom: 100px;

.formato th,
.formato td 
  border: 1px solid #000;
  padding: 20px;

.formato tr:hover td:not(.columna):not(.filas):not(.pie):not(.celda) 
  background: #ccc;
  cursor: pointer;

.columna,
.filas,
.pie,
.celda 
  pointer-events: none;

.formato td:not(.columna):not(.filas):not(.pie):not(.celda):hover 
  background: #000 !important;
  color: #fff;
<table class="formato">
  <caption>TITULO DE LA TABLA</caption>
  <!--La etiqueta <caption> define el título de una tabla. Esta etiqueta debe ser ubicada inmediatamente despué de la etiqueta de apertura <table>-->
  <thead>
    <!--Se declara semanticamente q es una cabecera de la tabla-->
    <tr>
      <th>cabecera de celda 1</th>
      <!--La etiqueta <th> define una celda de encabezado de una tabla. El texto de esta celda se representa en negrita y centrado.-->
      <th>cabecera de celda 2</th>
      <th>cabecera de celda 3</th>
      <th>cabecera de celda 4</th>
      <th>cabecera de celda 5</th>
    </tr>
  </thead>

  <tfoot>
    <!--Se declara semanticamente q es el pie de la tabla y siempre va antes del tbody-->
    <tr>
      <td colspan="5" class="pie">PIE DE TABLA</td>
    </tr>
  </tfoot>

  <tbody>
    <!--Se declara semanticamente q es el cuerpo de la tabla-->
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
      <td rowspan="5" class="columna">COLUMNAS</td>
      <!--rowspan indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila-->
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td colspan="5" class="filas">FILAS</td>
      <!--colspan indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna-->
      <td class="celda">CELDA</td>
    </tr>
  </tbody>
</table>

【问题讨论】:

【参考方案1】:

当指针事件在 tr 上禁用并在 td 上启用时,Firefox 会显示所需的行为,其值为 auto,如下所示:

tr 
    pointer-events: none;

td 
    pointer-events: auto;

工作示例

.formato 
  border: 1px solid #000;
  border-collapse: collapse;
  margin-left: 100px;
  margin-bottom: 100px;

.formato th,
.formato td 
  border: 1px solid #000;
  padding: 20px;

.formato tr:hover td:not(.columna):not(.filas):not(.pie):not(.celda) 
  background: #ccc;
  cursor: pointer;

.columna,
.filas,
.pie,
.celda 
  pointer-events: none;

.formato td:not(.columna):not(.filas):not(.pie):not(.celda):hover 
  background: #000 !important;
  color: #fff;

tr 
  pointer-events: none;

td 
  pointer-events: auto;
<table class="formato">
  <caption>TITULO DE LA TABLA</caption>
  <!--La etiqueta <caption> define el título de una tabla. Esta etiqueta debe ser ubicada inmediatamente despué de la etiqueta de apertura <table>-->
  <thead>
    <!--Se declara semanticamente q es una cabecera de la tabla-->
    <tr>
      <th>cabecera de celda 1</th>
      <!--La etiqueta <th> define una celda de encabezado de una tabla. El texto de esta celda se representa en negrita y centrado.-->
      <th>cabecera de celda 2</th>
      <th>cabecera de celda 3</th>
      <th>cabecera de celda 4</th>
      <th>cabecera de celda 5</th>
    </tr>
  </thead>

  <tfoot>
    <!--Se declara semanticamente q es el pie de la tabla y siempre va antes del tbody-->
    <tr>
      <td colspan="5" class="pie">PIE DE TABLA</td>
    </tr>
  </tfoot>

  <tbody>
    <!--Se declara semanticamente q es el cuerpo de la tabla-->
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
      <td rowspan="5" class="columna">COLUMNAS</td>
      <!--rowspan indica el número de filas que ocupará la celda. Por defecto ocupa una sola fila-->
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td>Item #1</td>
      <td>Item #2</td>
      <td>Item #3</td>
      <td>Item #4</td>
      <td>Item #5</td>
    </tr>
    <tr>
      <td colspan="5" class="filas">FILAS</td>
      <!--colspan indica el número de columnas que ocupará la celda. Por defecto ocupa una sola columna-->
      <td class="celda">CELDA</td>
    </tr>
  </tbody>
</table>

【讨论】:

这对tr/td +1 信息非常有用;)

以上是关于CSS 指针事件也可以禁用对底层元素的点击的主要内容,如果未能解决你的问题,请参考以下文章

用css 来禁用点击事件

如果禁用,则在悬停路由器按钮时禁用指针事件

禁用元素的停止事件冒泡

html 禁用鼠标滚轮对网页滚动条的控制怎么实现?

单击而不是滚动时的指针事件

禁用与指针事件的链接,但保持活动:悬停事件[重复]