Question

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

抱歉，我打算发布一个屏幕抓文，但我不允许。

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

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

如果您需要，可以使用以下特定菜单获取完整的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使用此方法。希望这会有所帮助。

CSS菜单：单击子菜单也会激活父项上的click事件

1 个答案: