скрипт запуска javascript, если курсор мыши покидает контейнер кнопок

#javascript #mousedown #mouseup

#язык JavaScript #наведение курсора мыши #наведение курсора мыши

Вопрос:

У меня есть функция JS, которая отлично работает, когда пользователь нажимает кнопку через x секунд, форма будет отправлена, если кнопка мыши удерживается нажатой, в противном случае, если мышь отпущена, кнопка возвращается в предварительно нажатое состояние. Однако я обнаружил проблему, когда, если курсор мыши покинет кнопку, форма все равно сработает и в значительной степени все сломает.

Мне нужно, чтобы моя функция наведения мыши также срабатывала, если мышь оставляет кнопку или каким-либо образом теряет фокус.

Заранее большое спасибо.

 function conf_submit(btn) { var btn_name = $(btn).val(); var btnID = $(btn).attr('id'); var process = false;  $(btn).mousedown(function() {  btn_timeout = setTimeout(function() {  process = true;  $(btn).val('Processing..');  $(btn).attr('class', 'button btn_longpress small btn-processing');  $('#'   btnID   '_form').submit();  }, 2000);  if(process == false){  $(this).val('Release to cancel!');  $(this).attr('class', 'button btn_longpress small cancel cancel-animate jiggle');  } });  $(btn).mouseup(function() {  clearTimeout(btn_timeout);  if(process == false){  $(this).val( btn_name );  $(this).attr('class', 'button btn_longpress small');  } });

}

1. Можете ли вы просто объединить mouseup, mouseleave, blur события вместо явного mouseup ?

2. что было бы лучшим способом объединить их, я добавил их как отдельные события, но я уверен, что есть гораздо более короткий и аккуратный способ сделать это, а затем скопировать и вставить событие mouseup для каждого из них

Ответ №1:

Если вы извлекете логику из функций mousedown и mouseup , это облегчит ее перепрофилирование.

 function conf_submit(btn) {  var btn_name = $(btn).val();  var btnID = $(btn).attr('id');  var process = false;   var start = function () {  btn_timeout = setTimeout(function () {  process = true;  $(btn).val('Processing..');  $(btn).attr('class', 'button btn_longpress small btn-processing');  $('#'   btnID   '_form').submit();  }, 2000);  if (process == false) {  $(this).val('Release to cancel!');  $(this).attr('class', 'button btn_longpress small cancel cancel-animate jiggle');  }  };  var stop = function () {  clearTimeout(btn_timeout);  if (process == false) {  $(this).val(btn_name);  $(this).attr('class', 'button btn_longpress small');  }  };   $(btn).mousedown(start);  $(btn).mouseup(stop);  $(btn).mouseleave(stop); }

Ответ №2:

Событие, которое вы ищете, — это событие «mouseleave».

Событие в приведенном ниже сценарии будет срабатывать каждый раз, когда ваша мышь покидает кнопку.

 document.getElementById("button").addEventListener("mouseleave", () =gt; {  alert("triggered event") })

 lt;button id="button"gt;Click Melt;/buttongt;