jquery - CSS 菜单 : clicking the sub-menu fires click event on parent too

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
});

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