<sx:submit>按钮在IE正常工作，Chrome中点击无响应问题

问题概述 #

使用Struts 2.1.8的<sx:submit>标签生成的表单提交按钮，在Chrome浏览器中点击后完全无响应，但在IE浏览器中可正常执行对应逻辑。排查情况：

• Chrome开发者工具未检测到任何JavaScript报错，后端Struts配置的关联方法断点无触发
• 对比IE与Chrome生成的HTML，发现属性大小写差异：
  • IE生成的HTML（驼峰属性）：

    <input class="button" id="widget_1597536618" type="submit" __doClobber__="true" __clobberAttrs__="onclick$joinpoint,onclick$joinpoint$method,onclick" dojoType="struts:Bind" executeScripts="true" ajaxAfterValidation="false" events="onclick" onclick$joinpoint$method="function(){}" onclick$joinpoint="[object Object]" value="Save" />
    

  • Chrome生成的HTML（全小写属性）：

    <input type="submit" dojotype="struts:Bind" events="onclick" value="Save" validate="false" ajaxafterValidation="false" id="widget_832070295" class="button" executescripts="true">
    

原因分析 #

Struts 2.1.8是2009年发布的老旧版本，其内置的Dojo标签库仅针对旧版IE做了兼容处理，生成的HTML自定义属性采用驼峰命名，但现代浏览器（如Chrome）对DOM属性的大小写敏感，无法识别全小写的dojotype、executescripts等属性，导致Dojo框架无法正确解析struts:Bind组件，绑定的点击事件失效。

解决方案 #

方案1：升级Struts版本（推荐） #

Struts 2.1.8存在大量已知兼容性问题与安全漏洞，后续的Struts 2.3.x及更高稳定版本已修复了现代浏览器的兼容问题，同时提升了系统安全性。建议直接升级到最新的稳定版本，从根源解决问题。

方案2：JS修正属性大小写（临时兼容） #

若暂时无法升级版本，可通过页面JavaScript在加载完成后修正属性的大小写，让Dojo能正确识别组件：

window.addEventListener('load', function() {
    const submitBtn = document.querySelector('input[dojotype="struts:Bind"]');
    if (!submitBtn) return;

    // 修正dojoType属性
    submitBtn.setAttribute('dojoType', submitBtn.getAttribute('dojotype'));
    submitBtn.removeAttribute('dojotype');

    // 修正executeScripts属性
    submitBtn.setAttribute('executeScripts', submitBtn.getAttribute('executescripts'));
    submitBtn.removeAttribute('executescripts');

    // 修正ajaxAfterValidation属性
    submitBtn.setAttribute('ajaxAfterValidation', submitBtn.getAttribute('ajaxaftervalidation'));
    submitBtn.removeAttribute('ajaxaftervalidation');

    // 重新初始化Dojo组件
    if (typeof dojo !== 'undefined') {
        dojo.parser.parse(submitBtn.parentNode);
    }
});

注意：需确保页面已正确加载Dojo库，否则dojo.parser.parse会执行失败。

方案3：替换为普通提交或现代AJAX实现 #

• 无需AJAX场景：直接将<sx:submit>替换为Struts普通<s:submit>标签，生成标准的表单提交按钮，兼容所有浏览器：

  <s:submit cssClass="button" value="Save" />
  

• 需要AJAX场景：放弃老旧的Struts Dojo标签，使用jQuery等现代AJAX库手动绑定提交事件，示例：

  <s:form id="myForm" action="myFormAction">
      <!-- 表单元素 -->
      <input type="button" class="button" value="Save" onclick="submitForm()" />
  </s:form>
  
  <script src="jquery.min.js"></script>
  <script>
  function submitForm() {
      $.ajax({
          url: $('#myForm').attr('action'),
          type: 'POST',
          data: $('#myForm').serialize(),
          success: function(response) {
              // 处理成功逻辑
          },
          error: function() {
              // 处理错误逻辑
          }
      });
  }
  </script>
  

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