Question

当我使用键盘从选择下拉列表中进行选择时，我发现了一个错误，提交了包含下拉列表的表单，这仅在IE上发生。下拉菜单位于div中，并且具有用于change事件的JS处理程序。

在处理程序中，包含下拉列表的div是隐藏的，这会导致在当前关注的任何内容上触发一个commit事件。

可以通过将div隐藏在change事件的上下文之外（使用setTimeout）来解决此问题，但这不能解释为什么发生此问题。

简化的示例（如果不使用jQuery，问题仍然存在）：

<form>
  <div id="container">
    <select id="select"></select>
  </div>
</form>

$("#select").on('change', function (e) {
  e.preventDefault();
  $("#container").hide(); <-- this causes the form to be submitted
})

隐藏div不应导致提交表单，只有IE和移动浏览器会显示此问题。

编辑：这是在IE 11和Edge上，我可以使用IE 11模拟器在10和9上遇到相同的问题，但我没有尝试过较低的版本。

更多代码：

<form>
    <div class="selectAddress u-hidden m-form-row m-form-row--full-width" style="display: block;">
        <label class="a-label" for="Contact_PolicyHolderAddress_FullAddress">Please select your address</label>
        <div class="m-form-row__content">
            <span class="a-dropdown">
                <select aria-required="true" autocomplete="off" class="a-dropdown__select addressList" id="Contact_PolicyHolderAddress_FullAddress"
                    name="Contact.PolicyHolderAddress.FullAddress">
                    <option aria-label="Please select" value="">Please select....</option>
                    <option>Option 1</option>
                    <option value="Address not found" class="notFound">Address not found</option>
                </select>
                <input class="addressList" id="Contact_PolicyHolderAddress_FullAddress" name="Contact.PolicyHolderAddress.FullAddress"
                    type="hidden" value="">
                <span class="a-dropdown__ui"></span>
            </span>
        </div>
    </div>
</form>

Answer 1

尝试停止事件传播：

$("#select").on('change', function (e) {
  e.preventDefault();
  e.stopPropagation();
})

在更改事件中隐藏元素时如何停止触发事件

1 个答案: