Проверка jQuery: обнаружение основного щелчка вместо размытия

Question

У меня есть форма, которую я создаю в Bootbox (сам слой поверх модального Bootstrap).После того, как он создан, я вызываю

$('#myForm').validate()

.

Желательная часть поведения состоит в том, что теперь, когда пользователь просматривает формы, он можетувидеть немедленную обратную связь, что они испортили одно из полей.Введен не адрес электронной почты, прежде чем нажать «вкладку» или щелкнуть в другом месте?Предупреждение и сообщение об ошибке.Отлично!

Но нежелательно то, что размытие съедает другие события.Таким образом, если пользователь вместо этого выберет «отменить» (прекрасно зная, что форма недействительна), щелчок по отмене не будет слышен, и его обработчик не сработает.Второй щелчок (теперь, когда фокус находится вне формы) и отмена пожаров, как и ожидалось.Я не хочу, чтобы пользователям приходилось дважды щелкать.

Я видел технику полного отключения размытия, но затем описанное выше желаемое поведение теряется, чего я тоже не хочу.В идеале, «я размыл, но я также знаю, что пользователь нажимал» - это то, что я ищу.

[ПРАВИТЬ ДОБАВИТЬ:]

Это привлекло мое вниманиечто это сбивает с толку, так что позвольте мне попробовать другой подход к вопросу: можно ли работать с формой (для которой была вызвана .validate()), затем щелкнуть по любому другому интерактивному элементу на всей странице и получитьего обработчик кликов успешно срабатывает?

[EDIT AGAIN:]

На основе демонстрации Спарки я написал предупреждение, чтобы показывать под входами размытие.Итак, чтобы увидеть проблему в действии, запустите эту скрипку: https://jsfiddle.net/bd1fhpu3/

Затем нажмите на одно из полей ввода перед тем, как нажать «просто кнопка».Нажмите верхнюю полоску «просто кнопка», чтобы убедиться, что предупреждающие надписи вытолкнули ее из горячей точки курсора при отпускании кнопки мыши.

В любом случае, это просто объясняет, в чем проблема.Решение этого вопроса, вероятно, больше не входит в сферу вопроса, но, похоже, стоит поделиться им, если кто-нибудь еще столкнется с этим.Чтобы решить эту проблему, мне нужно либо переопределить событие click в Bootbox, чтобы оно было событием mousedown вместо щелчка (тогда вам не нужно нажимать и отпускать), либо я могу использовать «Band-Aid» (tm) решение, избегая перемещениякнопка.Может быть, диалог статической высоты, который достаточно высок, чтобы вместить форму и любые возможные предупреждения.Определенно что-то вроде «взлома», такого как этот, потому что вы просто никогда не знаете, будете ли вы позже делать другие вещи, которые заставят проблему появиться снова.Но это было бы быстрое и простое временное исправление.

Answer 1

Просто для потомков, вот такой «ответ», какой он есть.Может быть, это поможет кому-то в какой-то день;Вы просто никогда не знаете.

Нет кода, который работает "неправильно", и поэтому нет ни исправления, ни примера кода, чтобы предоставить.Вот что происходит:

1. Пользователь находится в фокусе в поле
2. Пользователь нажимает кнопку мыши (но действие по отпусканию еще не произошло)
3. Событие Blurпожары, что приводит к появлению предупреждений об ошибках формы под полями.Это также имело чистый эффект нажатия кнопки «отмены» вниз по оси Y экрана
4. Пользователь отпускает кнопку мыши, что обычно завершает обработчик «щелчка».

ОДНАКО, в # 4, так как кнопка «отмена» больше не находится под курсором, слушатель события щелчка, связанный с кнопкой, не срабатывает.

Демонстрация, пока она живет в Интернете, будет в комментарии ниже.Тем не менее, предоставление примера кода для этого не имеет смысла.Когда демоверсия умрет, я удалю комментарий.

---

Возможные шаги (обходные пути / хаки), которые я выбрал, НЕ выполнять до сих пор:

1. Измените диалог так, чтобыкнопка не перемещается при срабатывании события mousedown, что означает, что событие «click» завершено успешно
2. Укажите пользовательский код, который заменяет событие mousedown для события click на кнопке.Однако это приводит к потере довольно распространенного соглашения пользовательского интерфейса
3. Заставить пользователя нажать ESC для отмены, вместо нажатия кнопки
4. [кредит Tieson T. через комментарий] Один из возможных вариантов, еслиВы можете использовать некоторые пользовательские стили сообщений об ошибках, чтобы скрыть их с помощью visibility: none вместо display: non e.Первый будет скрывать текст, но все равно зарезервировать вертикальное пространство текста, а второй нет (следовательно, почему ваш модальный расширяется).Это предотвратит смещение кнопки во время события фокусировки.Вы могли бы получить лишние пробелы, но вы могли бы убрать часть этого, удалив нижнее поле в группе форм (если вы его используете)

Я уверен, что есть и другиеобходные пути, но это отправная точка.

Answer 2

Вы не можете использовать встроенную функцию onfocuout, поскольку JavaScript не может знать разницу между фокусировкой на другое поле и фокусировкой на кнопку отмены.

Вам придется полностью отключить onfocusout и напишите некоторые пользовательские обработчики событий.

Ваш код разрежен, поэтому мой ответ будет очень общим.

$('#myForm').validate({
    // other options here
    onfocusout: false;   // disable default blur event
});

Затем напишите обработчик событий, который программно вызывает проверку в форме, когда онисосредоточиться на input и ничего не будет делать, когда они фокусируются на чем-либо, например на кнопке отмены.

$('#myForm input').on('focus', function() {
    $('#myForm').valid();  // trigger validation on the form
});

Однако это вызовет проверку всей формы.Если вы хотите запустить проверку только для одного поля, теряющего фокус, тогда вы вернетесь к исходному положению, потому что событие знает только о том, что фокус был потерян, а не о том, куда он движется.