时间戳

首页 > 解决方案 > 在更改事件中隐藏元素时如何阻止事件触发

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

问题描述

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

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

可以通过将 div 从更改事件的上下文之外隐藏（使用 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>

标签： javascriptinternet-explorerdom-events

解决方案

尝试停止事件传播：

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

推荐阅读