如何使反應舉表頭點擊

Question

碼的純文本：

<TableHeaderColumn dataField="test" isKey dataSort>Column</TableHeaderColumn> 

與此列被點擊，我只是想文本和雪佛龍公司可點擊的整個區域，我如何能實現那。

This image show that the whole area is clickable

請幫幫忙，我被困在這個

This is the output HTML generated

Answer 1

您可以使用CSS來禁用點擊使用pointer-events 財產的一些元素：

pointer-events: none;

這是定義的屬性值none的：

無：的元素是永遠鼠標事件的目標;然而，如果這些後裔將指針事件設置爲某個其他值，則鼠標事件可能會將其後代元素作爲目標。在這些情況下，鼠標事件將在事件捕獲/冒泡階段期間在它們到/來自後代的路上適當地觸發該父元素上的事件偵聽器。

看來TableHeaderColumn產生一些HTML代碼與特定的類，像這樣：

<th class="sort-column"> 

您可以編寫CSS：

.sort-column{ 
pointer-events:none; 

}

禁用點擊整列，但因爲這也將禁用點擊文本，你需要重置指針事件屬性關閉子元素（噸EXT）

.sort-column-child{ 
    pointer-events:auto; 
} 

這是你將如何使用它：

<TableHeaderColumn dataField="test" isKey dataSort><span class="sort-column-child">Column</span></TableHeaderColumn>