Javascript 立即导航到第一个<；p:menuitem>；何时<；p：子菜单>；它本身被点击了

我有一个动态如下

内的

不可单击

有一些CSS类绑定到JavaScript函数。单击这些

时，将调用以下函数

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

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

但是当点击最里面的

时，这两个函数都会被调用，这是不应该发生的

另外，单击每个

时，如何唯一地标识它们

---

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

您需要使用stopPropagation

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

这将停止通知父级事件

检查这个

但是当点击最里面的

时，这两个函数都会被调用，这是不应该发生的

你是暴力的受害者。在所有浏览器中，当DOM元素接收到事件时，这是在对传播到其所有父元素的当前元素进行处理之后发生的。也会调用它们的所有事件侦听器（如果有），除非您从当前侦听器函数中返回false，或者通过调用

event.stopPropagation（）

和像往常一样从函数中返回来显式停止传播。与

return false

的区别在于，当前元素（指向给定URL）上的单击事件的默认操作仍将执行

---

另外，单击每个

时，如何唯一地标识它们

负责触发事件的DOM元素位于侦听器中，可通过

this

使用。只需使用

$（）

构造jQuery对象，就可以将其进一步包装到jQuery对象中。在

的情况下，这将是一个HTML

元素，该元素又将

元素作为子元素

---

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

通常，您最好探索DOM元素本身。例如，通过检查子

元素的文本内容

---

总之，这里有一个重写，请注意，

事件

对象可用作第一个函数参数：

$(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");
});

---

当单击最内部的

（内部的唯一一行）时，jQuery函数也会被不必要地调用。我知道这实际上是您的要求（因为子菜单已经在悬停而不是单击上起作用，因此，显式地侦听单击事件以了解其是否已打开是没有意义的）。好的，使用

事件在
上附加一个新的单击侦听器。stopPropagation（）

。或者，检查

事件.目标

是否与

此

相同。另请参阅“事件冒泡”后面的文章链接。不管怎样，根据具体的功能需求（从问题中还不完全清楚），可能有比这更好的解决方案。要求只导航到另一个带有

id

（

Long

类型）的页面作为一个查询字符串参数，当点击

的一个项目时，就像点击

一样。得到它。它到底指向哪个URL？第一个子项目的URL？是的，它是第一个子项目，URL可以类似于

类别。jsf？id=10

（

Category.jsf

始终是稳定的。只有

id

在URL之间变化。在这种情况下，

id

可以被

{row.catId

引用）这真的让我沉迷了一段时间。请考虑在标题中添加PrimeFo脸ts。我以为你用HTML段落标签作为命名空间。有一点挖掘证明是另外的。

$(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.
});