CSS 菜单：单击子菜单也会触发父级的单击事件

Posted 2023-02-16

【中文标题】CSS 菜单：单击子菜单也会触发父级的单击事件

【英文标题】：CSS menus: clicking the sub-menu fires click event on parent too

【发布时间】：2012-01-31 12:01:19

【问题描述】：

我正在使用由嵌套列表完成的 CSS 下拉（实际上是下拉）菜单对现有网站进行一些更改。这里有一个工作现场版本：http://www.escondrijo.com/index_es.html?lang=es

抱歉，我正要发布截屏，但不允许。

我现在意识到，当我点击子菜单项时，它也会触发父菜单项的点击事件（紧接着）。

我怎样才能阻止这种情况发生？通过调整菜单，或者通过某种方式禁用点击事件（但不是在父菜单项本身被点击时）。

如果您需要，这里是带有此特定菜单的 DIV 的完整 HTML：

顺便说一句，我有可用的 jquery 库...

谢谢！

            <div id="footer_bar">
            <ul class="menu">
                <li>escondrijo
                    <ul>
                        <li onClick="resetPics(homePics);overlayToggle(document.getElementById('content_thehome'));">guesthouse</li>
                        <li onClick="javascript:window.location.replace('house_rental.html')">house rental</li>
                    </ul>
                </li>
                <li onClick="overlayToggle(document.getElementById('content_therooms'));">the rooms
                    <ul>
                        <li onClick="resetPics(hammockPics);overlayToggle(document.getElementById('content_hammock'));">hammock</li>
                        <li onClick="resetPics(woodburnerPics);overlayToggle(document.getElementById('content_woodburner'));">woodburner</li>
                        <li onClick="resetPics(luzPics);overlayToggle(document.getElementById('content_luz'));">luz</li>
                    </ul>
                </li>
                <li onClick="resetPics(locationPics);overlayToggle(document.getElementById('content_thelocation'));">the location</li>
                <li>reservations
                    <ul>
                        <li onClick="overlayToggle(document.getElementById('content_prices'));">prices</li>
                        <li onClick="overlayToggle(document.getElementById('content_request'));">send request</li>
                        <li onClick="overlayToggle(document.getElementById('content_policies'));">policies</li>
                    </ul>
                </li>
                <li>more info
                    <ul>
                        <li onClick="overlayToggle(document.getElementById('content_travel'));">travel</li>
                        <li onClick="overlayToggle(document.getElementById('content_directions'));">directions</li>
                        <li onClick="overlayToggle(document.getElementById('content_activities'));">activities</li>
                    </ul>
                </li>
                <li><a href="index_es.html?lang=es"><em>&gt;Castellano</em></a></li>
            </ul>
        </div>

【参考方案1】：

听起来你需要调用 jQuery 的 stoppropagation 方法。这在您的事件侦听器中调用。所以，例如：

$("p").click(function(event)
event.stopPropagation();
// do something
);

另一种选择可能是将事件侦听器添加到父元素并使用事件委托来找出用户实际单击的链接。这是附加事件侦听器的推荐方法。它提供了更快的性能和更少的开销。您只需向每个列表添加一个事件侦听器，而不是为每个项目添加一个侦听器。 Here's some more information 使用这种方法。希望这会有所帮助。

【讨论】：

太好了，谢谢。对我来说是新的领域，上帝知道如果没有 jQuery 我会怎么做，但我可以添加这个来解决任何发生的问题：$("li ul li").click(function(event) event.stopPropagation(); )