CODEWITHSUNDEEP
javascriptjqueryjquery-events
krische
krische

Reputation: 1010

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

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.

Upvotes: 37

Views: 12203

Answers (3)

Jonathan Payne
Jonathan Payne

Reputation: 2223

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

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

Upvotes: 2

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

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

Upvotes: 8

gen_Eric
gen_Eric

Reputation: 227200

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/

Upvotes: 83

Related Questions