jQuery 블러 이벤트와 클릭 이벤트 간의 충돌에 대한 해결 방법

사진과 같이 입력창과 로그인 버튼이 있습니다.

포커스가 입력창에 있을 때 로그인 버튼을 직접 클릭하면 블러 이벤트와 클릭 이벤트가 발생합니다.
이제 클릭 이벤트가 블러 이벤트를 발생시키지 않게 하고 싶습니다. 해결 방법은 다음과 같습니다. ?

온라인에서 확인하세요. 두 가지 방법 중 다른 방법이 있는지 여쭤보고 싶습니다.

1. 클릭 이벤트가 블러 이벤트보다 먼저 발생하면 문제가 없으니 시간을 추가하시면 됩니다. (지연된 트리거링)을 setTimeout(fn, 250);
   2과 같은 흐림 이벤트에 추가합니다. 전자의 deleteblur 이벤트와 후자는 이를 다시 추가합니다. 클릭이 실행되기 전에 마우스는 mouseover 이벤트를 실행합니다. 흐림이 삭제되면 클릭이 완료된 후 mouseout이 흐림을 다시 추가합니다. (마우스오버, 마우스아웃은 포커스를 이동하지 않습니다)

   이것은 모바일 프론트엔드, html 페이지이며, 사용된 라이브러리는 zepto
   1입니다. 이 입력창은 비밀번호를 입력하는 상자입니다.
   2. 로그인 버튼을 클릭하면 입력란의 내용도 확인됩니다. 입력 상자 확인에 바인딩됩니다. 블러 이벤트와 로그인 버튼 확인이 탭 이벤트에 바인딩됩니다.
   
   ----
   Update---------이것은 플로팅 상자 프롬프트입니다. 문제가 발생하면 여기를 사용하세요.
   

HTML5의 API 오류 알림 상자는 다음과 같습니다.

이 스타일의 HTML5는 브라우저 자체여야 합니다. Chrome과 IE의 알림은 이렇게 보이지 않습니다. 마찬가지로, 문제가 발생하면 이 기본값을 사용할 수 없나요?

로그인 버튼을 클릭하기 위한 전제 조건은 로그인 버튼에 포커스가 맞춰져 있다는 것입니다. 로그인 버튼에 포커스가 맞춰져 있으면 원래 포커스가 맞춰져 있던

control

이 흐려져야 합니다. UI 상호 작용 논리 자체는 이와 같아야 합니다.

그래서 문제는 아마도 블러 이벤트 리스너에서 블러 모드에서 수행해서는 안 되는 작업을 수행했기 때문일 것입니다. 이것이 소위 충돌이 발생하는 이유입니다. 이제 요구 사항과 실제 코드가 수행하는 작업을 더 자세히 설명하는 것이 좋습니다. 우리는 그것이 어떻게 구현되어야 하는지를 볼 수 있습니다.

----

업데이트:

제목 설명에 따르면 흐림 효과는 유효성 검사를 위한 것입니다. 따라서 당연히 블러를 사용해서는 안 되며 입력 이벤트를 사용할 수 있습니다. 오래된 브라우저를 처리하기 위해 변경 이벤트를 연결할 수도 있습니다.

일반적으로 HTML5 유효성 API를 사용하는 것이 좋습니다. 그러면 제출 시 자동으로 확인이 이루어집니다. 직접 작성하는 인증코드는 스파게티와 똑같으니 걱정하지 않으셔도 됩니다.

블러 이벤트를 입력에 연결하면 세 가지 작업만 가능합니다. 1. 입력의 포커스 스타일 취소 2. 데이터 확인 수행 3. 사용자가 입력을 완료한 후 일부 작업을 자동으로 트리거(예: 휴대폰

인증코드

)

순전히 사용자 경험의 관점에서 볼 때, 1. 브라우저의 기본 동작에는 아무런 문제가 없습니다. 2의 경우 입력 상자 데이터가 변경될 때 수행되는 확인을 변경하는 것이 보다 합리적인 경험이어야 합니다.

$('input').on('input', function() {
   // validate
});

// or

$('input').on('keypress', function() {
   clearTimeout(timer);
   timer = setTimeout(validate, 200);
});


作者：贱草
链接：https://www.zhihu.com/question/29623049/answer/45020820
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

3의 경우, 작업이 완료되기 전에 양식을 제출하면 안 되기 때문에 버튼을 클릭하기 전에 블러 이벤트가 실제로 트리거되어야 합니다.

문제 설명의 옵션 2는 단순히 악몽입니다. 당신이 스마트 솔루션이라고 생각하는 것은 유지 관리가 매우 어려울 것입니다.

선생님, 무슨 고민을 하고 계신지 모르겠습니다.

또한 양식 제출 전 작업을 버튼의 클릭 이벤트에 연결하지 않는 것이 가장 좋습니다. $(form).on('submit');

3의 경우 흐림 이벤트가 실제로 트리거되어야 합니다. 버튼을 클릭하기 전에 작업이 완료되지 않으면 양식을 제출하면 안 되기 때문입니다.

문제 설명의 옵션 2는 단순히 악몽입니다. 당신이 스마트 솔루션이라고 생각하는 것은 유지 관리가 매우 어려울 것입니다.

선생님, 무슨 고민을 하고 계신지 모르겠습니다.

또한 양식 제출 전 작업을 버튼 클릭 이벤트에 연결하지 않는 것이 가장 좋습니다. $(form).on('submit');

위 내용은 jQuery 블러 이벤트와 클릭 이벤트 간의 충돌에 대한 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!