jQuery .click() is triggering when selecting/highlighting text

Question

I have a <div> with a bunch of text in it. This <div> also has a .click() event on it using jQuery.

The problem I'm having is that the .click() is being triggered when selecting/highlighting text. Even holding the mouse down for several seconds before releasing.

Here is a JSFiddle that shows the issue: http://jsfiddle.net/ym5JX/

The behavior that I would expect is that highlighting text isn't the same as clicking on the element.

That's because a click is a mousedown followed by a mouseup. — gen_Eric
– gen_Eric, Commented Apr 30, 2012 at 20:19
mousedown + mouseup = click. Highlighting does it, so it is triggering click. — Selvakumar Arumugam
– Selvakumar Arumugam, Commented Apr 30, 2012 at 20:19
What is your question? Do you want to stop the click happening? Only allow click if no text selected? — Rory McCrossan
– Rory McCrossan, Commented Apr 30, 2012 at 20:22
Not in my case (Opera). And btw, shouldn't mousedown + mouseup = click hold only if there is a small (system-definable) time delay between the events? — Imp
– Imp, Commented Apr 30, 2012 at 20:22

gen_Eric · Accepted Answer · 2012-04-30 20:23:42Z

84

That's because a click is a mousedown followed by a mouseup. My suggestion is to check getSelection inside the click handler. If it's set, then you selected something, else you just clicked.

$('#click').click(function() {
    var sel = getSelection().toString();
    if(!sel){
        alert("clicked");
    }
});

DEMO: http://jsfiddle.net/ym5JX/3/

answered Apr 30, 2012 at 20:23

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brad Kent Over a year ago

probably want to check the length haveSel = getSelection().toString().length > 0

Andreas Hultgren Over a year ago

To not break the whole app when a user has text selected somewhere else it might be good to check that the selected text is in the relevant element: if(!e.target.contains(getSelection().anchorNode)).

Necreaux Over a year ago

Checking for selection elsewhere does not seem to be necessary. The reason is that a "true" click with clear any selection elsewhere on the page.

Selvakumar Arumugam · Accepted Answer · 2012-04-30 20:24:41Z

9

As I posted on comment, mosuedown + mouseup = click which is exactly what highlighting does. There is workaround for this.. see below,

var isClick = 0;
$('#click').click(function() {
    if (isClick == 1) {
        alert("clicked");
    }
}).mousedown(function () {
    isClick = 1;
}).mousemove(function () {
    isClick = 0;
});

DEMO

answered Apr 30, 2012 at 20:24

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

1 Comment

gen_Eric Over a year ago

Checking if the mouse moved between mousedown and mouseup, clever :-P

Jonathan Payne · Accepted Answer · 2012-04-30 20:24:44Z

2

jsFiddle: http://jsfiddle.net/ym5JX/8/

$('#click').click( function()
{
    if ( getSelection() == "" )
    {
        alert("clicked");
    }
});

answered Apr 30, 2012 at 20:24

Jonathan Payne

2,22313 silver badges11 bronze badges

Collectives™ on Stack Overflow

jQuery .click() is triggering when selecting/highlighting text

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related