You need to refactor your HTML markup. Instead of setting onClick on a li
element, you set it on a child element. E.g.:
ul []
[ li [] [ text "driver 1" ]
, li []
[ span [ onClick (Crumple "driver 2"] [ text "driver 2" ]
, ul []
[ li [] [ text "..." ]
]
]
]
With this markup, the span element is listening for click events.
Your problem was the event listener on li element would eventually be fired
by a click on any of its child elements as the click is happening on that
particular li element also. Events are bubbling up from target node up to
body element. Read about it here
http://www.javascripter.net/faq/eventbubbling.htm. I'm not sure about Elm
0.14, but if you are saying it did work, then probably Elm was preventing
event bubbling.
On Sunday, June 11, 2017 at 11:11:58 AM UTC+3, David Legard wrote:
>
> I use cascading lists of ul and li elements (nodes) to create a navigation
> tree menu.
>
> I keep a list of which nodes are open in my model, and when I click on a
> node, I toggle its presence in the list of open nodes.
>
> I can then display or hide relevant nodes depending on whether they are
> open or not.
>
> onoffstyle : List String -> String -> Attribute Msg
> onoffstyle openNodes s =
> let oright = filter (\o -> o==s) openNodes
> in case (isEmpty oright) of
> True -> style [("display","none")]
> _ -> style [("display","block")]
>
> I set up a cascading list as follows with ul and li to create a tree menu.
> 'Crumple' is the message I use to toggle the open node list.
>
> drivers : Model -> Html Msg
> drivers m = li [S.listyle,onClick (Crumple "drivers") ]
> [text "Software Drivers"
> , ul [S.ulstyle,S.onoffstyle m.opens "drivers"]
> [text "R"
> ,li [onClick (Crumple "drivers1")] [text "Drivers 1"]
> ,li [onClick (Crumple "drivers2")] [text "Drivers 2"]
> ,ul []
> [text "A"
> ,hr[][]
> ,text "B"]
>
> ]
> ]
>
> However, even if I click on one of the innermost tree items, let us say,
> the "A" node, the onClick event in the outermost li fires (top line of the
> code).
>
> Is that correct behaviour? It didn't happen in 0.14, but does in 0.17,
> throwing my navigation out of sync.
>
> If it is correct behaviour, how would I get round it?
>
> Thanks.
>
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
