单击<p:子菜单>本身时,立即导航到第一个<p:menuitem>

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类绑定到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

但是当点击内部时,大多数<p:submenu>这些函数都被调用,不应该发生.

你是事件冒泡的牺牲品.在所有浏览器中,当DOM元素接收事件时,这是在对传播给其所有父节点的当前元素进行处理之后.它们的所有事件侦听器(如果有的话)也会被调用,除非您return false从当前的侦听器函数中调用,或者通过调用event.stopPropagation()并像往常一样从函数返回来显式停止传播.不同之return false处在于仍将执行click事件对当前元素(转到给定URL)的默认操作.

还有如何<p:submenu>在点击它们时唯一地识别每个？

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

有没有办法传递一些值,以便可以唯一地识别它们,如追加到URL的查询字符串？

通常,您最好探索DOM元素本身.例如,通过检查子<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()by $(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.
});