Halogen double mouseUp event

#1

On my top level div, I have
HE.onMouseUp $ HE.input_ $ MouseUp_Anywhere

And for a small area of the window (moveSquare x), I also have
HE.onMouseUp $ HE.input_ $ MouseUp_MoveSquare x

In eval, I have this:

MouseUp_Anywhere next -> do
    H.modify (_ {mouseDown_MoveSquare = Nothing})    
    pure next

MouseUp_MoveSquare x next -> do
    mouseDown_MoveSquare <- H.gets _.mouseDown_MoveSquare 
    when (mouseDown_MoveSquare == Just x) do
        newMove = ...
        H.modify (_ {move = newMove})
    pure next

Question: This code actually works fine (thus far), but is it valid (i.e., reliable)? The MouseUp_Anywhere also kicks in for MouseUp_MoveSquare yet seems to always be called second, because I reliably test against a valid H.gets _.mouseDown_MoveSquare, even though it gets set to Nothing when handling MouseUp_Anywhere. The advantage of this technique (if in fact valid) is that it allows me to avoid doing testing with mousePos.

#2

monoidmusician answers from Slack cross-posting:

Have you read about event bubbling? I think that will answer your question :slight_smile:
The short answer is that events bubble from inner elements to outer elements, so inner event handlers will be run first, for the same event.

Some groups of events have their own interactions too, such as mouse up/down and click always run in a specified order.

1 Like