嵌套鼠标事件的JQuery问题

时间:2011-06-17 15:55:57

标签: jquery events mouse

在同时使用所有这3个事件时,我似乎遇到了问题。

我有一个大的div,它有mouseup,mousedown和mousemove绑定到它。在这个大型div中,有几个较小的div(我想点击它)。我应该补充一点,clickable元素是较大div的子元素。

问题是click事件似乎不起作用。但是,如果我注释掉其他鼠标事件,它可以正常工作。

我猜这里存在某种事件冲突,因为点击实际上是mousedown和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>

1 个答案:

答案 0 :(得分:2)

在父div上的事件中,您可以检查以确保单击的元素(事件目标)实际上是父div,而不是子div。请参阅this fiddle作为示例。

在父div的事件处理程序中,使用类似:

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

并将您的点击事件正常附加到孩子div