Question

在同时使用所有这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>

Answer 1

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

在父div的事件处理程序中，使用类似：

的内容

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

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

嵌套鼠标事件的JQuery问题

1 个答案: