С JS имею дело крайне редки и знаю его слабо, так что не могу понять в чем прикол. В форму добавлена дополнительная кнопка для выбора картинки из библиотеки. На ней висит проверка события: Код (Text): $('.set_custom_images').on('click', function(e) { console.log(e); // тут отмена действий по умолчанию и вывод окна выбора картинки. ... }); Весь код внутри не важен, с ним всё норм, работает корректно. Непонятка с другим. Вот этот код выдает в консоль сообщение что сработало собие originalEvent: MouseEvent, type: "click", что логично. Но при этом, если в каком-то из инпутов формы щелкнуть Энтер, то тоже срабатывает это событие и вместо отправки формы вываливается окно выбора картинки. Если логически подумать, то и эта кнопка и нажатие Энтера в инпуте отправляет форму и вроде как происходит одно и тоже. Но клик мышью и энтер в инпуте это же вроде как разные события, да и инпут это нифига не кнопка с классом "set_custom_images". В общем не понимаю в чем прикол.
Спасибо кэп, я это и так вижу. Собственно я это и описал в вопросе. Мне интересно почему так происходит. Я не вижу в событиях клавиатуры https://api.jquery.com/category/events/keyboard-events/ этого .click() события. Зато оно есть в событиях мыши https://api.jquery.com/category/events/mouse-events/. Мне надо отменить действия по умолчанию только для этой кнопки и только с неё вызывать окно выбора. Но почему-то это происходит для всей формы.
Даже не обязательно конкретно эту форму показывать. Самая простоя форма с простым алертом (вместо вызова окна) выдает такой-же результат. HTML: <form method="post"> <p><input type="text" name="test"></p> <p><button class="set_custom_images">Выбрать картинку</button></p> <p><input type="text" name="test2"></p> <p><input type="submit"></p> </form> Код (Javascript): jQuery(document).ready(function () { $('.set_custom_images').on('click', function (e) { e.preventDefault(); console.log(e); alert('click'); return false; }); });
а, вон оно как... там хитрость есть одна, при использовании button в формах нужно обязательно указывать их тип Код (Text): <p><button type="button" class="set_custom_images">Выбрать картинку</button></p> иначе кнопка считается сабмитом, ну и нажатие на энтер в любом поле эмулирует клик по данной кнопке. а вот чтоб отменить отправку формы по энетру - нужно на все текстовые поля вешать обработчик нажатий - смотреть не ентер ли это - и отменять действие, либо делать свое - например переход фокуса на следующее по tabIndex
@ADSoft уже предложил более логичное решение, но я вставлю свои 5 копеек : event.preventDefault() и event.stopPropagation() - тоже полезные штуки по этой теме.
Эм... Если ты внимательно посмотришь, e.preventDefault(); есть в коде. Это то как раз работает. Речь шла не об этом.