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.

Answer 1

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/

Answer 2

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

Answer 3

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

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