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

Question

I've found a bug when I'm using a keyboard to select from a select drop down, the form containing the drop down is submitted, this only happens on IE. The drop down is in a div and has a JS handler for the change event.

In the handler the div containing the drop down is hidden, this causes a submit event to be triggered on whatever is currently focused on.

The problem can be solved by hiding the div from outside the context of the change event (using a setTimeout) but this doesn't explain why the issue is occurring.

Simplified example (the issue persists if jQuery is not used):

<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
})

Hiding the div shouldn't cause the form to be submitted, only IE and mobile browsers are showing this issue.

Edit: This is on IE 11 and Edge, I can get the same issue on 10 and 9 using the IE 11 emulator, I haven't tried lower versions.

More code:

<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

try to stop the event propagation :

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