React table cell getSelection()-CodePudding

I have a table with an onRowClick handler on the <tr/> element, I want to prevent a click event if I select text inside it, my solution was this:

const getSelectionWithoutClick = (originalHandler: () => void) => {
  if (!getSelection()?.toString()) originalHandler();
};

What I found odd is, when I select a text inside a cell, and click on the same cell, the click event is not fired until the selection is cleared, but if click on another cell (even in the same row), while text is selected in the original cell, the click event fires. You know why this happens??

CodePudding user response：

I think you can differentiate between click and select event based on onm ouse up

function TablePage() {
  function onSelect(e) {
    let selection = window.getSelection().toString();

    if (selection === '') {
      console.log('click');
    } else {
      console.log('selection', selection);
    }
  }

  return <table>
    <thead>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td onm ouseUp={onSelect}>Alfreds Futterkiste</td>
        <td onm ouseUp={onSelect}>Maria Anders</td>
        <td onm ouseUp={onSelect}>Germany</td>
      </tr>
    </tbody>
  </table>
}

export default TablePage;