Как остановить запуск события при скрытии элемента в событии изменения

Question

Я обнаружил ошибку, когда я использую клавиатуру для выбора из выпадающего списка, отправляется форма, содержащая выпадающий список, это происходит только в IE. Раскрывающийся список находится в div и имеет обработчик JS для события change.

В обработчике div, содержащий раскрывающийся список, скрыт, это вызывает событие submit для того, на чем в данный момент сосредоточено внимание.

Проблема может быть решена путем сокрытия 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, я могу получить ту же проблему на 10 и 9 с помощью эмулятора IE 11, я не пробовал более низкие версии.

Больше код:

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