jQuery: How to stop click event from firing when dblclicking

I am trying the dblclick() event of jQuery, and it works fine. Problem is, I am also using the click event, and when I dblclick, the click event fires twice and the dblclick once. Anyone have any ideas on how to stop the click event from firing when a dblclick event fires?

Thanks.

Here's my sample code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
    #gridContents tr {
        background: lightgray;
        cursor: pointer;
    }
</style>
<script>
$(function() {
    $("#gridContents tr").click(function() {
        console.log("CLICK");
    });
    $("#gridContents tr").dblclick(function() {
        console.log("DBLclick");
    });
});
</script>
</head>
<body>
<table id="gridContents">
    <tr custID="1"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="2"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="3"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="4"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="5"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="6"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="7"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="8"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="9"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="-1"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
</table>
</body>
</html>

Open in new window

elepilAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,
imho you should avoid having both click events on the same element.
From the jQuery docs:
It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable.

If you really need this working, for which browsers and client OS?

Just my 2ct
Rainer
elepilAuthor Commented:
Rainer, thanks for responding.

I have a dialogue box that acts like a data grid, i.e., with rows of information from a result set. A single click would visually highlight a row to denote a user selection. The user can then click a Select button to finalize his selection. A double-click both selects the item and closes the dialogue box in one gesture. And I do need this to work across all browsers.

The above behaviors I described are pretty common in other applications. I'm just surprised that there isn't a simple way to implement this.
RobOwner (Aidellio)Commented:
This isn't simple and has its flaws however i believe it should work ok for you:

http://jsbin.com/voxale/1/edit?js,console,output

Essentially you're just waiting a specified amount of time for the dblClick event.  If it doesn't come then you process a Click if it does you cancel the click event and process the double click.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
elepilAuthor Commented:
Thanks again, Rob!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.