За последние 24 часа нас посетили 22745 программистов и 1217 роботов. Сейчас ищут 676 программистов ...

Странное поведение MouseEvent

Тема в разделе "JavaScript и AJAX", создана пользователем bikerlex, 25 фев 2020.

  1. bikerlex

    bikerlex Активный пользователь

    С нами с:
    2 дек 2014
    Сообщения:
    344
    Симпатии:
    40
    С JS имею дело крайне редки и знаю его слабо, так что не могу понять в чем прикол.

    В форму добавлена дополнительная кнопка для выбора картинки из библиотеки.
    На ней висит проверка события:
    Код (Text):
    1. $('.set_custom_images').on('click', function(e) {
    2.     console.log(e);
    3.     // тут отмена действий по умолчанию и вывод окна выбора картинки.
    4.     ...
    5. });
    Весь код внутри не важен, с ним всё норм, работает корректно.
    Непонятка с другим.
    Вот этот код выдает в консоль сообщение что сработало собие originalEvent: MouseEvent, type: "click", что логично. Но при этом, если в каком-то из инпутов формы щелкнуть Энтер, то тоже срабатывает это событие и вместо отправки формы вываливается окно выбора картинки.

    Если логически подумать, то и эта кнопка и нажатие Энтера в инпуте отправляет форму и вроде как происходит одно и тоже. Но клик мышью и энтер в инпуте это же вроде как разные события, да и инпут это нифига не кнопка с классом "set_custom_images".
    В общем не понимаю в чем прикол.
     
  2. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.767
    Симпатии:
    1.322
    Адрес:
    Лень
    Все что внутри контента .set_custom_images вылавливается событие click
     
  3. bikerlex

    bikerlex Активный пользователь

    С нами с:
    2 дек 2014
    Сообщения:
    344
    Симпатии:
    40
    Спасибо кэп, я это и так вижу. Собственно я это и описал в вопросе.
    Мне интересно почему так происходит. Я не вижу в событиях клавиатуры https://api.jquery.com/category/events/keyboard-events/ этого .click() события.
    Зато оно есть в событиях мыши https://api.jquery.com/category/events/mouse-events/.

    Мне надо отменить действия по умолчанию только для этой кнопки и только с неё вызывать окно выбора. Но почему-то это происходит для всей формы.
     
  4. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.830
    Симпатии:
    738
    Адрес:
    Татарстан
    покажите код формы то и кнопки?
     
  5. bikerlex

    bikerlex Активный пользователь

    С нами с:
    2 дек 2014
    Сообщения:
    344
    Симпатии:
    40
    Даже не обязательно конкретно эту форму показывать.
    Самая простоя форма с простым алертом (вместо вызова окна) выдает такой-же результат.
    HTML:
    1. <form method="post">
    2.     <p><input type="text" name="test"></p>
    3.     <p><button class="set_custom_images">Выбрать картинку</button></p>
    4.     <p><input type="text" name="test2"></p>
    5.     <p><input type="submit"></p>
    6. </form>
    Код (Javascript):
    1. jQuery(document).ready(function () {
    2.     $('.set_custom_images').on('click', function (e) {
    3.         e.preventDefault();
    4.         console.log(e);
    5.         alert('click');
    6.         return false;
    7.     });
    8. });
     
  6. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.830
    Симпатии:
    738
    Адрес:
    Татарстан
    а, вон оно как...
    там хитрость есть одна, при использовании button в формах нужно обязательно указывать их тип
    Код (Text):
    1. <p><button type="button" class="set_custom_images">Выбрать картинку</button></p>
    иначе кнопка считается сабмитом, ну и нажатие на энтер в любом поле эмулирует клик по данной кнопке.

    а вот чтоб отменить отправку формы по энетру - нужно на все текстовые поля вешать обработчик нажатий - смотреть не ентер ли это - и отменять действие, либо делать свое - например переход фокуса на следующее по tabIndex
     
    #6 ADSoft, 26 фев 2020
    Последнее редактирование: 26 фев 2020
    twim32, Artur_hopf и bikerlex нравится это.
  7. bikerlex

    bikerlex Активный пользователь

    С нами с:
    2 дек 2014
    Сообщения:
    344
    Симпатии:
    40
    @ADSoft серьезно? И всего-то? o_O
    Я вот этого не знал. Спасибо! Всё заработало как мне надо. :)
     
  8. twim32

    twim32 Активный пользователь

    С нами с:
    29 мар 2017
    Сообщения:
    275
    Симпатии:
    58
    @ADSoft уже предложил более логичное решение, но я вставлю свои 5 копеек : event.preventDefault() и event.stopPropagation() - тоже полезные штуки по этой теме.
     
  9. bikerlex

    bikerlex Активный пользователь

    С нами с:
    2 дек 2014
    Сообщения:
    344
    Симпатии:
    40
    Эм... Если ты внимательно посмотришь, e.preventDefault(); есть в коде. Это то как раз работает. Речь шла не об этом.