如何检测PrimeFaces <p:inplace>组件的点击或编辑启动事件？

我之前也碰到过一模一样的需求，折腾了好一阵才找到几个干净且官方支持的方案，完全不用去手动操作DOM或者扩展Java组件，给你分享下：

方法一：监听组件的客户端pfshow事件（最推荐） #

PrimeFaces的<p:inplace>组件在切换到编辑状态时，会触发一个名为pfshow的客户端事件，我们可以通过Widget API来监听这个事件，精准捕捉编辑启动的时机：

首先给组件设置一个widgetVar，方便在JS里引用：

<p:inplace id="userNameInplace" widgetVar="userNameInplace" value="#{userBean.userName}">
    <p:inputText value="#{userBean.userName}" />
</p:inplace>

<!-- 用来触发后端方法的远程命令 -->
<p:remoteCommand name="onEditStart" action="#{userBean.handleEditStart}" />

然后在页面脚本里监听事件：

$(document).ready(function() {
    // 监听pfshow事件，这是组件进入编辑状态时触发的官方事件
    PF('userNameInplace').jq.on('pfshow', function() {
        // 调用远程命令触发后端方法
        onEditStart();
        // 也可以在这里做前端操作，比如显示提示、修改样式等
        console.log("进入编辑状态了！");
    });
});

这个方法基于PrimeFaces官方API，不会因为版本升级失效，还能准确判断状态切换，避免重复触发。

方法二：直接使用组件的onclick属性 #

如果需求比较简单，也可以直接在<p:inplace>上绑定onclick事件，不过要加个判断避免重复触发（比如已经在编辑状态时点击不会重复执行）：

<p:inplace id="emailInplace" widgetVar="emailInplace" onclick="handleEditStart()" value="#{userBean.email}">
    <p:inputText value="#{userBean.email}" />
</p:inplace>

<p:remoteCommand name="triggerEditAction" action="#{userBean.handleEmailEditStart}" />

<script>
function handleEditStart() {
    var inplace = PF('emailInplace');
    // 只有当组件未处于编辑状态时，才执行操作
    if (!inplace.isEditing()) {
        triggerEditAction();
        console.log("开始编辑邮箱啦");
    }
}
</script>

这种方法更直接，但必须加状态判断，不然用户在编辑状态下再次点击组件，会重复触发你的操作。

为什么不用扩展组件？ #

你之前提到的手动扩展Java组件完全没必要，PrimeFaces的客户端API和远程命令已经能完美解决需求，扩展组件不仅增加代码复杂度，还可能和后续PrimeFaces版本产生兼容性问题，优先用上面两种方法就好。

内容来源于stack exchange