Prevent onClick event when selecting text

Question

I\'ve got this problem where I need to show and hide divs when clicking on a table cell. However, I also want people to be able to select text and copy it within the cell wi

Answer 1

TLDR

Demo: http://jsfiddle.net/5472ja38/

Code (cancels click event when text highlighted/selected):

document.getElementById('information').addEventListener('click', (e) => {
  const cellText = document.getSelection();
  if (cellText.type === 'Range') e.stopPropagation();
})

Explanation

document.getSelection().type checks on the document object level if any of the text has been highlighted. If yes the type property is equal to 'Range' stop the event propagation which will cancel the click toggle button change.

Taken from MDN

A DOMString describing the type of the current selection. Possible values are:

None: No selection has currently been made.

Caret: The selection is collapsed (i.e. the caret is placed on some text, but no range has been selected).

Range: A range has been selected.