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

Question

我正在使用由嵌套列表完成的 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>

Answer 1

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

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

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