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 指针事件也可以禁用对底层元素的点击的主要内容,如果未能解决你的问题,请参考以下文章