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

You could check if there is a selection made in the click event handler:

window.getSelection().toString();

Answer 2

You can check if the 'information' div is toggled :

function toggleInfo() {
    if(document.getElementById('information').style.display == 'none'){
         $("#clicktoshow").toggle();
         $("#information").toggle();
   } else { 
       // do nothing
   }
}

Check this Fiddle

Answer 3

You can use mouseup, mousedown and mousemove events to achieve this:

DEMO

var isDragging = false;
$("#clickshow")
.mousedown(function() {
    isDragging = false;
})
.mousemove(function() {
    isDragging = true;
 })
.mouseup(function() {
    var wasDragging = isDragging;
    isDragging = false;
    if (!wasDragging) {
        $("#information").toggle();
        $("#clicktoshow").toggle();
    }
});

SOURCE

Answer 4

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.

Answer 5

One option is to check the type of the Selection object returned by window.getSelection:

function toggleInfo() {
    var selection = window.getSelection();
    if(selection.type != "Range") {
        $("#clicktoshow").toggle();
        $("#information").toggle();
    }
}

http://jsfiddle.net/k61u66ek/4/

Update

If the browser you're targeting doesn't expose a type property on the Selection object then you can test against the length of the selected value instead:

function toggleInfo() {
    var selection = window.getSelection();
    if(selection.toString().length === 0) {
        $("#clicktoshow").toggle();
        $("#information").toggle();
    }
}

http://jsfiddle.net/k61u66ek/9/

which can in turn be reduced down to a bool check on toString:

if(!selection.toString()) {

http://jsfiddle.net/k61u66ek/10/