검증 코드
샘플 애플리케이션

요약

a 태그 안의 태그에 stopPropagation 및 preventDefault를 활성화한 이벤트 리스너를 붙이면 중지됨

소개

Elm에서 URL을 라우팅하려면 Browser.application을 사용해야합니다.
Browser.application을 사용한 Elm 앱을 사용하면 a 태그의 링크와 history back 등의 URL 변경을 통일적으로 처리할 수 있습니다.

샘플 애플리케이션 을 clone하고 elm reactor로 움직여보세요

git clone https://github.com/miyamoen/a-click-sample.git
cd a-click-sample
elm reactor

(이동하는 것이 귀찮은 사람은 위의 이미지를보십시오)

리스트 페이지와 각 상세 페이지(라고 해도 내용은 바뀌지 않습니다만)가 있어, 주된 기능으로서 화상을 돌릴 수 있습니다

특히 이상한 곳은 없습니다. 카드 컴포넌트를 클릭하면 상세 페이지로 날아가고, 회전 버튼을 누르면 회전합니다.

그럼 다음은 여기 의 True 를 False 로 바꾸거나 해보세요 (elm reactor 는 hot reaload 가 붙지 않으므로 수동으로 다시 로드합시다)

    -- 親のaタグのclickイベントを発火させないようにする
    , stopPropagation = False

    -- ブラウザのaタグでの遷移の挙動を止める
    , preventDefault = False

어때? 버튼을 클릭하면 돌지만 천이도 버리거나 이런 이미지가 나오게 되지 않습니까? (elm reactor에서의 거동입니다. 사용하는 dev server의 404 페이지가 나온다고 생각합니다)



False, False가 기본 이벤트 처리기입니다. 이 설정에서는 돌기는 돌지만 함께 천이도 버린다는 움직임이 됩니다
전환하는 것을 멈추고 다른 것을 돌리고 싶다는 것이 이번 취지가됩니다.

방법

onCustomClick : msg -> Attribute msg
onCustomClick msg =
    Html.Events.custom "click"
        (JD.succeed
            { message = msg
            , stopPropagation = True
            , preventDefault = True
            }
        )

a 태그 안의 버튼이나 임의의 태그로 이 onCustomClick 를 사용해 이벤트 핸들러를 등록하기만 하면 됩니다
a 태그 자체에 붙여도 안됩니다. 멈출 수 없습니다.
a 태그의 부모에게 붙여도 안됩니다. useCapture=true 뭐라고 몰라

간단합니다.

어려운 세팅

먼저 이벤트 발생 순서에 대해 알아보십시오.

나는 【DOM 이벤트의 캡쳐/버블링을 정리한다 ~ JS 오쿠노호소길 #017】에서 공부했다.

Elm 상관 없네요. Elm은 그다지 중요하지 않습니다.
Browser.application 는 a 태그에 대한 전용 click 이벤트 처리기를 붙입니다.
따라서 안쪽에서 stopPropagation하면 위로 전파하지 않는다는 것입니다.

결론

a 태그 안의 태그에 stopPropagation 및 preventDefault를 활성화한 이벤트 리스너를 붙이면 중지됩니다.

친구는 원하는만큼 스팸 메일을 돌려주세요.