まとめ

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を有効にしたイベントリスナーを貼ると止めれます

おとは好きなだけスパムを回してください

Elmでaタグの遷移を止めて別のことをさせたい

まとめ

はじめに

やり方

くわしいせつめい

おわりに