JQuery problem with nested mouse events

Question

I seem to be having a problem when using all 3 of these events at the same time.

I have a large div which have mouseup, mousedown, and mousemove bound to it. Inside of this large div, there is several smaller divs (which I would like to be clickable). I should add that the clickable element is a child of the larger div.

The problem is that the click event does not seem to be working. However, if I comment out the other mouse events, it works fine.

I am guessing there is some sort of conflict of events here, since a click is really a combination of mousedown and mouseup.

 <script type="text/javascript"> $(document).ready(function() { //Create tooptips for existing zones $('.oldBox').tipsy({ title: 'data-callrange', gravity: 'sw' }); var x1,y1; $('.openTab .img_container').live('mousedown', function(e) { e.preventDefault(); }); $('.openTab .img_container').live('mousemove', function(e) { }); //Process just created box $(document).mouseup(function() { }); $('.oldBox').live('click', function(){ $('#mouse_pos').html('You clicked '+ $(this).attr('data-callrange')); }); }); </script>

It would be a big help to see the jQuery you think is causing the problem. Also a JS Fiddle demo that reproduces your problem would be useful. — David Thomas
– David Thomas, Commented Jun 17, 2011 at 15:58

James Allardice · Accepted Answer · 2011-06-17 16:00:04Z

In the events on the parent div, you can check to make sure the clicked element (the event target) was in fact the parent div, and not the child div. See this fiddle as an example.

In the event handlers for the parent div, use something like:

if(event.target.id == "i_am_a_big_div_with_three_events") { //Do stuff }

And attach your click event to the child div as normal.

Collectives™ on Stack Overflow

JQuery problem with nested mouse events

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related