jQuery bind on click when not highlighting

Question

Is it possible to react to a click only when the user is not highlighting the text like facebook does in its chat windows?

$("#wrapper").on("click", '.content', $.proxy(function(e) {
// if ($(e.currentTarget).isHighlighted()) return false;
}, this));

Is this a similar question for you? http://stackoverflow.com/questions/9065828/javascript-check-if-text-selected — Niklas, Mar 11 '14 at 11:58
This is not really working well. See the comment on the answer. — Chris, Mar 11 '14 at 12:01

CodingIntrigue · Accepted Answer · 2014-03-11T12:05:12.307

2

Insider your click handler, you can test to see if the document has any selection:

$("#wrapper").on("click", function() {
    if(!document.getSelection().toString().length) {
        console.log("No selection made");
    }
});

Here is a fiddle of the above.

If you need it to work in IE8, you'll need to use document.selection instead.

edited Mar 11 '14 at 12:05

answered Mar 11 '14 at 11:58

CodingIntrigue

75,930
30
170
176

@Chris Everything but <=IE8. You'd need to use `document.selection` for that instead – CodingIntrigue Mar 11 '14 at 12:01

score 2 · Answer 2 · answered Mar 11 '14 at 12:00

Yes, it's possible.

You can use Selection API, and take care of cross-browser compatibility.

$("#wrapper").on("click", '.content', $.proxy(function(e) {
  var selection = window.getSelection();
  if (selection && selection.containsNode(e.target)) {//selection contains event target
    return false;
  }
}, this));

To be more accurate, you can check whether focusNode or anchorNode is the event target.

jQuery bind on click when not highlighting

2 Answers2