jQuery Event propagation, when using different event types

Question

I have set up a jsfiddle to show the issue I have. http://jsfiddle.net/fy8tK/3/

In simple terms, I have a child element that has both a single click and double click trigger. They are both handled within the click event using a timeout.

The parent term also has a double click event. I defined it using dblclick however. event.stopPropagation() is not working, and I'm wondering if it is because they are different event types?

Basically, I need the parent dblclick event to not fire if we are actually clicking on the child element.

I believe, you doing it wrong. Try to think how to separate those events in one childish handler. — Vasiliy Stavenko, Jul 21 '13 at 23:46

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

$('.parent').bind('dblclick', function (e) {
    if (e.target !== 'div.child') {
        alert('double click parent');
    }
});
$('.child').bind('click', function(e) {
    alert('single click child');
});

JSFIDDLE

From the jQuery Documentation on 'dblclick' : 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.

You can also refer to this SO question

edited May 23 '17 at 11:57

Community

1
1

answered Jul 21 '13 at 23:49

DevlshOne

8,357
1
29
37

That SO question is where I based my child handler off. Thanks for the tip re `e.target`. – Eric Holmes Jul 22 '13 at 01:20
essentially what you have there. `if ( ! $(e.target).hasClass('child'))` – Eric Holmes Jul 22 '13 at 12:58

jQuery Event propagation, when using different event types

1 Answers1