Wie nur Text von reagieren Bootstrap-Tabellenkopf klickbare

Question

-Code machen:

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

Damit die gesamte Fläche der Säule klickbare ist, ich will nur den Text und die Sparren anklickbar sein, wie kann ich erreichen Das.

This image show that the whole area is clickable

Bitte helfen Sie, ich bin auf diese

This is the output HTML generated

Answer 1

stecken Sie CSS deaktivieren Sie auf einige Elemente mit pointer-events Eigenschaft verwenden:

pointer-events: none;

Das ist Definition von none Wert der Immobilie:

none: Das Element ist nie das Ziel von Mausereignissen; Mausereignisse können jedoch auf ihre untergeordneten Elemente abzielen, wenn diese Nachkommen Zeiger auf einen anderen Wert gesetzt haben. Unter diesen Umständen lösen Mausereignisse Ereignis-Listener auf diesem Elternelement auf ihrem Weg zum/vom Nachkommen während der Ereigniserfassungs-/Blasenphasen entsprechend aus.

Es scheint TableHeaderColumn einige html mit bestimmten Klasse zu erzeugen, das so etwas wie:

<th class="sort-column"> 

Ihre CSS schreiben:

.sort-column{ 
pointer-events:none; 

}

Klick auf ganze Spalte deaktivieren , aber da dies auch das Klicken auf Text deaktiviert, müssen Sie die Pointer - Events - Eigenschaft des untergeordneten Elements zurücksetzen (t ext)

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

Dies ist, wie Sie es verwenden:

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