javascript - 立即导航到第一个 <p :menuitem> when <p:submenu> itself is clicked

Question

我有一个动态 <p:menubar> 如下。

<p:menubar style="position: relative; height: 30px; visibility: visible;">
    <p:submenu label="Category" icon="ui-icon-document" styleClass="mainMenu">
        <c:forEach var="row" items="#{parentMenuManagedBean.category}">
            <p:submenu label="#{row.catName}" icon="ui-icon-contact" styleClass="subMenu">
                <c:forEach var="subRow" items="#{row.subCategoryList}">
                    <p:menuitem value="#{subRow.subCatName}" url="ProductDetails.jsf?subCatId=#{subRow.subCatId}"/>
                </c:forEach>
            </p:submenu>
        </c:forEach>
    </p:submenu>
</p:menubar>

</p:submenu>里面的</p:menubar>不可点击。

有些 CSS 类绑定(bind)到 JavaScript 函数。当这些<p:submenu>被点击，以下函数被调用。

$(function(){
    $(".mainMenu").bind("click", function(){ alert("mainMenu was clicked"); });
});

$(function(){
    $(".subMenu").bind("click", function(){ alert("subMenu was clicked"); });
});

但是当点击最里面的时候<p:submenu>调用这两个函数是不应该发生的。

还有如何唯一标识每个 <p:submenu> , 什么时候被点击？

有没有办法传递一些值，以便像附加到 URL 的查询字符串一样唯一地标识它们？

Answer 1

But when clicking on the inner most <p:submenu> both of these functions are called that should not happen.

您是 event bubbling 的受害者.在所有浏览器中，当一个 DOM 元素接收到一个事件时，这是在对当前元素进行处理之后传播到它的所有父元素。他们的所有事件监听器(如果有的话)也会被调用，除非你 return false从当前的监听器函数，或通过调用 event.stopPropagation() 显式停止传播并像往常一样从函数返回。与 return false 的区别是仍然会执行当前元素(转到给定的 URL)上的点击事件的默认操作。

---

Also how to uniquely identify each <p:submenu>, when they are clicked?

负责触发事件的 DOM 元素位于 this 可用的监听器中.您可以通过简单地用 $() 构造它来将其进一步包装到 jQuery 对象中.如果是<p:submenu> ，那将是一个 HTML <li>元素又具有 <a>元素作为 child 。

---

Is there a way to pass some value so that they can uniquely be identified like query-string appended to a URL?

通常，您最好探索 DOM 元素本身。例如，通过检查 child 的文本内容<a>元素。

---

总而言之，这是一个重写，注意event对象可用作第一个函数参数:

$(document).on("click", ".mainMenu", function() {
    console.log("mainMenu was clicked");
});
$(document).on("click", ".subMenu", function(event) {
    event.stopPropagation(); // Stop event bubbling.
    var $this = $(this); // That's the <li> element.
    var $link = $this.children("a"); // That's the immediate child <a> element.
    var label = $link.text(); // You could use it to identify the submenu.
    // ...
    console.log("subMenu with label " + label + " was clicked");
});

(请注意，我还将 $(function(){}) 和 $.bind() 替换为 $(document).on() ，这样可以安全地防止 Ajax 请求上的 DOM 更新；您不需要重新执行整个脚本)

---

更新:根据评论，最初的问题根本不清楚的具体功能要求(我现在改进了问题标题)是导航到相同的单击子菜单本身时，URL 作为菜单的第一项。在那种情况下，你最好勾上子菜单自己的<a>。元素直接由.subMenu>a选择器并执行 window.location在菜单第一个的 URL 上 <a>元素。这是另一个重写:

$(document).on("click", ".subMenu>a", function() {
    var $this = $(this); // That's the submenu's <a> element itself.
    var $link = $this.next().find("a:first"); // That's menu's first <a> element.
    var url = $link.attr("href"); // The URL of that link.
    // ...
    window.location = url; // It'll change the document immediately. No need to stop propagation.
});