javascript - Primefaces p :menuitem don't fire event when onclick event return true

Question

我正在使用 PrimeFaces p:menuitem 组件来执行删除。为了添加确认步骤，我使用了显示 JavaScript 确认对话框的 onclick 事件。在我的代码下面:

<p:menuitem icon="fa fa-fw fa-remove"
    title="#{message.global_remove}"
    value="#{message.global_remove}"
    actionListener="#{componentListMB.delete(cp.id)}"
    onclick="return confirm('#{message.component_list_confirm_deletion}')"
    update=":component_list" />

当用户确认删除时不会触发该操作，而是在 URL 末尾添加一个 #。

为什么在 p:commandButton 中没有触发事件一切正常？

---

我正在使用:

• JSF 2.1.7
• Primefaces 6.0

Answer 1

The action is not fired when the user confirm the deletion but, instead, a # is added at the end of the URL.

Primefaces 实际上是将您的 p:menuitem 呈现为 a HTML 标记，使用元素的 onclick 事件来执行它自己的 Ajax要求。例如

onclick="PrimeFaces.ab({...});return false;"

注意他们在末尾添加了一个 return false; which prevents the default browser behaviour a 元素，因此 URL 中不会出现 #。

当您添加confirm 函数时，它被放置在onclick 元素的开头，如下所示:

onclick="return confirm('confirm?');PrimeFaces.ab({...});return false;"

如果您不确认，则不会在 URL 中出现 #，因为默认行为已被阻止。如果你确认它会出现。但是 Ajax 操作永远不会执行，因为您首先调用了 return 语句。

您可以通过更改 p:menuitem 的 onclick 事件实现预期的行为，如下所示:

onclick="if (!confirm('#{message.component_list_confirm_deletion}')) return false;"

Why the event is not fired while in a p:commandButton everything works fine ?

Primefaces 对 p:commandButton 的处理方式不同。它包装了用户的onclick 和Primefaces Ajax 函数，将它们中的每一个都放在一个单独的函数中，并将它们发送到Primefaces#bcn。它按顺序执行功能。第一个返回 false 的函数会停止其余函数的处理。生成的 HTML 中的 onclick 将如下所示:

onclick="PrimeFaces.bcn(this, event, [function(event){return confirm('confirm?')},function(event){PrimeFaces.ab({...});return false;}]);"