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>

Answer 1

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.