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

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

0 голосов
/ 25 января 2019

Я обнаружил ошибку, когда я использую клавиатуру для выбора из выпадающего списка, отправляется форма, содержащая выпадающий список, это происходит только в 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 и мобильные браузеры.

Edit: Это на 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>

1 Ответ

0 голосов
/ 25 января 2019

попытаться остановить распространение события: 

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