어린이 중 한 명이 포커스를 받을 경우 블러 이벤트가 발생하지 않도록 합니다.

어린이 중 한 명이 포커스를 받을 경우 블러 이벤트가 발생하지 않도록 합니다.

특정 카테고리(이미지, 이름 등)에 대한 정보를 보여주는 페이지에 디브가 있습니다.

편집 이미지를 클릭하면 카테고리가 편집 모드로 전환되어 이름을 업데이트할 수 있습니다.아래 이미지에서 볼 수 있듯이, "Soup"은 현재 편집 모드에 있고, 다른 것들은 일반 보기 모드에 있습니다.모든 것이 제대로 작동하는 취소/저장 버튼에서는 예상대로 작동합니다. (이미지 추가를 시도했지만 허용하지 않았습니다. 더 많은 사랑이 필요합니다.)

그러나 편집 모드에서 페이지의 다른 곳(디브 바깥쪽)을 클릭하면 수프 범주가 다시 보기 모드로 돌아가는 예상 결과가 나타납니다.이벤트가 발생하면 변경 내용을 저장하고 싶은지 물어볼 수 있습니다.

그래서 저는 "soups" parent div에 블러 이벤트를 만들기로 결심했습니다.페이지의 아무 곳이나 클릭하면 예상대로 작동하지만, 분할의 내부 요소를 클릭하면 부모 흐림 이벤트가 발생하여 범주가 보기 모드로 돌아갑니다.

그렇다면 자녀 중 한 명이 초점을 받을 경우 부모 디브가 블러 이벤트를 발사하는 것을 방지할 수 있는 방법이 있을까요?

<div tabindex="-1" onblur="alert('outer')">
    <input type="text" value="Soup" />
</div>

나는 컴파일러 없이 코드를 작성했기 때문에 그것이 작동하는지는 확실하지 않지만 그것으로 당신이 아이디어를 얻길 바랍니다.

나는 즉시 GUI를 업데이트하기 위해 Knout.js를 사용하고 있지만 그것이 내가 생각하지 못했던 이 답변에 영향을 미치지는 않을 것입니다.

저도 같은 문제에 직면했습니다.이것이 나에게 효과가 있었습니다.

 handleBlur(event) {
    // if the blur was because of outside focus
    // currentTarget is the parent element, relatedTarget is the clicked element
    if (!event.currentTarget.contains(event.relatedTarget)) {
        .....
    }
}

맛있게 드세요 :)

저는 이 문제를 해결해야 했던 적이 문제를 해결해야 했습니다.이게 최선의 해결책인지는 잘 모르겠지만, 결국 제가 사용하게 된 것입니다.

클릭 이벤트는 흐림 후에 발생하기 때문에, 어떤 요소가 초점을 얻고 있는지 구분할 수 있는 (크로스 브라우저, 신뢰할 수 있는) 방법이 없습니다.

그러나 뮤즈다운은 흐리기 전에 발사됩니다.이는 자녀 요소의 마우스다운에 플래그를 설정하고 부모의 흐릿한 부분에서 해당 플래그를 조회할 수 있음을 의미합니다.

작동 예: http://jsfiddle.net/L5Cts/

또한 처리해야 함을 유의하십시오.keydown(및 탭/shift-tab 확인) 키보드로 인해 발생하는 블러도 잡으려면 이 옵션을(를) 선택합니다.

제 생각에는 어떤 보장도 없는 것 같습니다.mousedown모든 브라우저에서 포커스 이벤트가 발생하기 전에 발생하므로 이를 처리하는 더 나은 방법은 를 사용하는 것일 수 있습니다.를 위해focusin이벤트, 더eventTargetproperty는 현재 포커스를 잃고 있는 요소에 대한 참조입니다.해당 요소가 상위 요소의 하위 요소인지 확인할 수 있으며, 하위 요소가 아닌 경우 포커스가 외부에서 상위 요소로 들어가는 것을 알 수 있습니다.를 위해focusout이벤트,relatedTarget는 현재 포커스를 받고 있는 요소에 대한 참조입니다.동일한 논리를 사용하여 포커스가 부모에서 완전히 벗어나는지 확인합니다.

const parent = document.getElementById('parent');

parent.addEventListener('focusin', e => {
    const enteringParent = !parent.contains(e.relatedTarget);

    if (enteringParent) {
        // do things in response to focus on any child of the parent or the parent itself
    }
});

parent.addEventListener('focusout', e => {
    const leavingParent = !parent.contains(e.relatedTarget);

    if (leavingParent) {
        // do things in response to fully leaving the parent element and all of its children
    }
});

언급URL : https://stackoverflow.com/questions/12092261/prevent-firing-the-blur-event-if-any-one-of-its-children-receives-focus