如何移除PrimeFaces 12中p:button的ui-state-active类？

问题原因 #

你用onmouseover/onmousemove移除ui-state-hover能正常生效，但onmousedown移除ui-state-active无效，核心原因是PrimeFaces按钮组件的内部JS逻辑会在mousedown事件触发后，再次自动添加ui-state-active类，你的移除操作被后续的组件逻辑覆盖了。

可行实现方案 #

方案1：延迟执行移除操作 #

通过setTimeout延迟执行移除，确保在PrimeFaces内部逻辑完成后再生效：

<p:button
    onmouseover="$(this).removeClass('ui-state-hover')"
    onmousedown="setTimeout(() => $(this).removeClass('ui-state-active'), 10)"
/>

方案2：阻止默认事件（需测试影响范围） #

阻止mousedown的默认行为，避免PrimeFaces触发添加类的逻辑，注意：这可能影响按钮的原生焦点行为，需根据实际场景测试：

<p:button
    onmouseover="$(this).removeClass('ui-state-hover')"
    onmousedown="$(this).removeClass('ui-state-active'); return false;"
/>

方案3：CSS强制覆盖样式 #

如果不需要完全移除类，只是消除active状态的视觉效果，直接用CSS覆盖更高效：

.ui-button.ui-state-active {
    /* 覆盖为默认状态样式，示例： */
    background-color: inherit !important;
    border-color: inherit !important;
    box-shadow: none !important;
    /* 根据需求添加其他需要覆盖的属性 */
}

方案4：通过组件widget绑定事件 #

利用PrimeFaces的widgetVar，在组件初始化后绑定自定义事件处理：

<p:button widgetVar="customButton" />

<script>
$(document).ready(function() {
    // 处理hover状态
    PF('customButton').jq.on('mouseover mouseenter', function() {
        $(this).removeClass('ui-state-hover');
    });
    // 处理active状态
    PF('customButton').jq.on('mousedown', function() {
        setTimeout(() => $(this).removeClass('ui-state-active'), 0);
    });
});
</script>

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