Question

我一直在研究一个非常简单的Jquery脚本，它为用户显示一些迷你仪表板（div）。当有人单击链接时，将显示正确的面板。非常像Twitter的登录面板。

我唯一的问题是，当我在面板外面点击时，它按预期关闭，但当我在面板内部单击时，它仍然会关闭。

每个面板中还有其他html元素，我想知道它们是否“妨碍”主面板div？

帐户menu.js

(function($){
    $.fn.renderDash = function(openDash, fn) {
        var container = $(this);
        container.removeClass('no-js');

        container.bind('click', function(event){event.preventDefault();clickStart();})
                 .bind('mouseup', function(event){mouseupDash();})

        $(document.body).bind('mouseup', function(event){ // <-- the offending code
            if ($(openDash).has(this).length == 0) { 
                $(openDash).hide();
            }

        })   

        function clickStart() {$(openDash).toggle();}
        function mouseupDash() {return false;}
    };
})(jQuery);

的index.html

...
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="account-menu.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.panel1-start').renderDash("#panel1");
        $('.panel2-start').renderDash("#panel2");
        $('.panel3-start').renderDash("#panel3");
    });
</script>
...
</head>

<body>
...
<ul>
    <li>
        <a href="" class="panel1-start">Panel 1 Link</a>
        <ul id="panel1">
            <li>Panel 1 Content</li>
        </ul>
    </li>
panel2, panel3, etc...

更新：我刚刚添加了一段html代码。可能会让事情变得更清晰。

Answer 1

您是否尝试过使用此功能;

container.bind('click', function(event){event.preventDefault();clickStart();})
                 .bind('mouseup', function(event){event.stopPropagation();mouseupDash();})

应该停止前往文档正文的mouseup事件。

修改

从现在提供的代码中获取an example。它很脏，但应该给你一个起点。 .stopPropagation()是正确的，但它被应用于错误的元素。面板在第一次加载时显示，单击它们将全部隐藏。但是，一旦你切换它们，就会调用.stopPropagation()，这一切都应该有效。只有Chrome中的testde。

Answer 2

在内部元素的点击处理程序中调用event.stopPropagation();。这可以防止外部元素接收click事件。当然，同样适用于您的其他鼠标事件。

jQuery在元素之外的事件上隐藏元素

2 个答案: