PrimeFaces 11中selectOneMenu的click ajax事件无法触发问题

根本原因 #

PrimeFaces 11.0 版本的p:selectOneMenu默认采用自定义DOM结构渲染：原生<select>元素会被隐藏，替换为div+列表元素拼装的自定义下拉组件。官方文档列出的支持事件清单是基于原生select元素的能力，但实际渲染时，自定义外壳层没有对click事件做透传绑定，你配置的<p:ajax event="click">本质是绑在了被隐藏的原生select上，用户点击的是上层自定义DOM，自然不会触发回调，不管是前端onstart还是后端监听器都不会执行。

你测试能正常触发的focus事件，是因为组件外层的可聚焦容器绑定了该事件，但只要配置了update="@this"，组件每次更新重绘后会自动触发聚焦逻辑，就会再次触发focus事件→再次发起ajax请求更新组件→再次聚焦，形成无限递归，这个是组件重绘后的默认行为，和事件注册逻辑无关。

可行解决方案 #

• 优先使用组件专用事件替代通用click
  如果你要监听下拉选项被选中的行为，直接使用组件原生支持的itemSelect事件，这个事件是绑定在自定义下拉层的，不存在透传问题，触发时机稳定，也不会出现重复触发问题：

  <p:selectOneMenu value="#{beam.event}" editable="false" id="event">
      <f:selectItems value="#{beam.events}"/>
      <p:ajax event="itemSelect" immediate="true" listener="#{beam.onClick}" update="@this"/>
  </p:selectOneMenu>
  

  如果你要监听点击组件本体（未展开下拉时的点击动作），把event="click"换成event="mousedown"即可，这个鼠标事件在PrimeFaces 11的selectOneMenu自定义渲染层是做了透传的，触发时机和click基本一致，可以正常执行回调。
• 开启原生渲染模式
  如果你必须使用原生click事件，可以给组件添加native="true"属性，让组件直接渲染原生select元素，这种模式下列出的所有DOM事件都可以正常绑定生效，但会丢失组件的自定义皮肤样式和部分扩展交互特性：

  <p:selectOneMenu native="true" value="#{beam.event}" editable="false" id="event">
      <f:selectItems value="#{beam.events}"/>
      <p:ajax event="click" immediate="true" listener="#{beam.onClick}" update="@this"/>
  </p:selectOneMenu>
  

• 修复focus事件死循环
  如果场景必须用focus事件，不要直接在focus回调里更新组件自身，可以在onstart里加状态判断，过滤掉组件重绘后自动触发的focus事件，再执行后续逻辑，避免递归。

补充说明 #

同一组件上绑定多个同事件的<p:ajax>标签本身是PrimeFaces支持的写法，你之前写两个click监听器不触发，和多绑定配置无关，纯粹是事件没有透传到实际点击的DOM节点导致的。
所有自定义渲染的PrimeFaces表单组件（比如selectOneMenu、Calendar、AutoComplete等）都不会100%透传所有原生DOM事件，使用前建议先在浏览器开发者工具里检查实际渲染的DOM节点绑定的事件列表，避免无效配置。

内容的提问来源于stack exchange，提问作者krizajb