代码之家 › 专栏 › 技术社区 › Tiny user825402

单击<p:submenu>时,立即导航到第一个<p:menuitem>

primefaces jsf jquery javascript

Tiny user825402 · 技术社区 · 12 年前

我有一个动态 <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> s内部 </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: 子菜单> 这两个函数都被调用,这是不应该发生的。

以及如何唯一地识别每个 <p: 子菜单> ,当它们被单击时?

是否有一种方法可以传递一些值,以便可以像附加到URL的查询字符串一样唯一地标识这些值?

2 回复 | 直到 12 年前

BalusC 12 年前

但当点击最内侧时 <p:submenu> 这两个函数都被调用,这是不应该发生的。

你是受害者 event bubbling 在所有浏览器中,当DOM元素接收到事件时,这是在对传播到其所有父元素的当前元素进行处理之后。它们的所有事件侦听器(如果有的话)也会被调用,除非您 return false 或通过调用 event.stopPropagation() 并照常从函数返回。与 return false 当前元素上的单击事件的默认操作(转到给定URL)仍将执行。

以及如何唯一地识别每个 <p: 子菜单> ,当它们被单击时?

负责触发事件的DOM元素位于侦听器中 this 。您可以通过简单地用 $() 。如果 <p: 子菜单> ,这将是一个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() 通过 $(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.
});

Fiambre 12 年前

您需要使用stopPropagation

$( ".subMenu").click(function( event ) {
    event.stopPropagation();
    // Do something
});

这将停止向父级通知事件。

检查此项 http://api.jquery.com/event.stoppropagation/