div 클릭 시 fireing focus 이벤트 방지

div 클릭 시 fireing focus 이벤트 방지

이 질문은 이전 질문인 Focused DIV에 대한 Click action과 유사하지만, 이번에는 주요 주제가 "Div 중 하나를 클릭할 때 포커스 이벤트가 트리거되지 않도록 하는 방법"입니다.클릭할 때 포커스를 맞추기 위해 tabindex='-1'로 div를 하나 가지고 있었는데, 이제 tabindex>0으로 div 목록을 가지고 있어서 탭할 때도 포커스를 잡을 수 있습니다.

<div tabindex='1'>Div one</div>
<div tabindex='1'>Div two</div>
<div tabindex='1'>Div tree</div>
<div tabindex='1'>Div four</div>

일부 스타일링:

div {
    height: 20px;
    width: 60%;
    border: solid 1px blue;
    text-align: center;
}
div:focus {
    border: solid 2px red;
    outline: none;
}

지금은 플래그(액션)를 사용하여 두 번째로 div를 클릭할 때 액션(알림)을 발사하고 있으며, TAB와 같이 이미 초점이 맞춰진 경우 클릭 한 번으로 실행하고 있습니다.

var action = false;
$('div')
    .click(function(e){
        e.stopImmediatePropagation();
        if(action){alert('action');}
        action = true;})
    .focus(function(){action = true;})
    .blur(function(){action = false;});

위 코드의 문제는 포커스 이벤트가 실행되고 있다는 것입니다. 즉, 즉각적인 전파가 예상대로 작동하지 않는다는 것을 의미합니다.두 번의 클릭 동작은 포커스 이벤트 라인에 주석을 달지만, 디바익이 TAB에 초점을 맞출 때는 여전히 더블 클릭이 필요합니다.다음은 http://jsfiddle.net/3MTQK/1/ 의 예입니다.

데모 여기

제 생각에 당신은 여기 몇가지 부분을 놓치고 있는 것 같습니다.

1. event.stopPropagation()이벤트가 거품이 나는 것을 막기 위해 사용됩니다.여기서 읽어보실 수 있습니다.

2. event.stopImmediatePropagation()요소의 추가 핸들러가 실행되지 않도록 하는 것 외에도, 이 방법은 암시적으로 호출함으로써 버블링을 막습니다.event.stopPropagation(). 여기서 읽어보실 수 있습니다.

3. 브라우저 이벤트를 중지하려면 다음을 사용해야 합니다.event.preventDefault(). 여기서 읽어보실 수 있습니다.

4. click = mousedown + mouseup-> 마우스 다운이 성공하면 HTML 요소에 포커스가 설정됩니다.그래서 구속하는 대신에click이벤트, '마우스다운'을 사용해야 합니다.제 데모를 보세요.

5. 1개의 액션 부울 값을 사용하여 클릭한 디바와 클릭한 횟수를 확인할 수 없습니다.어떻게 대처할 수 있는지 제 데모를 확인해 보세요.

div를 클릭할 때 초점을 맞추는 것을 간단히 방지하려면 다음을 사용합니다.mousedown + event.preventDefault(). @Selbakumar Arumugam이 설명한 것처럼 마우스 다운이 성공하면 포커스 파이어가 발생하고 event.preventDefault()가 브라우저 이벤트(포커스 포함)를 중지하므로 클릭보다는 마우스 다운을 사용합니다.

코드 예시는 다음과 같습니다.

$('#div').on('mousedown', function(event) {
// do your magic
event.preventDefault();
});

간단히 말해서.

// ❌ Don't (focus already set on mouse down)
onClick={e => e.preventDefault()}

// ✔️ Do (prevent focus)
onMouseDown={e => e.preventDefault()} 

현재로서는 선택자를 단순히 'div'에서 토글된 클래스 이름의 시스템으로 제한하는 것이 명백한 해답이 될 것입니다. 그러면 포커스 이벤트가 발생할 요소를 제어할 수 있습니다.이것은 더 지루하고 약간의 예외적인 코딩이 필요하지만, 그 일을 할 수 있을 것입니다.

var action = false;
$('div')
    .click(function(e){
        e.stopImmediatePropagation();
        if(action){alert('action');}
        action = true;})
    .focus(function(){action = true;})
    .blur(function(){action = false;});

언급URL : https://stackoverflow.com/questions/8735764/prevent-firing-focus-event-when-clicking-on-div