OnClick is triggered by element added below

[thorebear]

The big picture of what I'm trying to do

Adding an element below another element, where the upper element has a click handler.

What I did

I used the below function to add the lower element, and Events.onClick to add a click-handler to the upper element.

What I Expected To Happen

I expected the click handler on the upper element to be triggered only when I clicked on this element.

What Actually Happened

The click handler (which was only added to the upper element) was triggered when clicking on the lower element in Chromium/Chrome - but worked as expected in other browsers.

The problem is reproduced here: https://ellie-app.com/tc5cknKyHa1/0

Versions

• Elm: 0.18
• style-elements: 4.2.0
• Browser: Chrome 60.0.3112.90 (and Chromium)
• Operating System: Linux

[mpizenberg]

I'm having the same issue. In addition to a click triggered on the upper element the "hover" behavior is also triggered. In the image below, my (invisible) mouse is on the maximize icon "below" the octogon one. Both the maximize and octogon icons are hovered instead of only the maximize icon.

Tried on Firefox 56, 57, chromium 62. style-elements 4.2.0

[mpizenberg]

By the way @thorebear, an easy hack to prevent your issue that also works in my case for :hover is to break the parent chain dependency with an el container.

Here is the relevant code for your ellie example:

--, Element.button Btn [ Events.onClick ClickClick ] (Element.text "Has click handler")
, el None [] (Element.button Btn [ Events.onClick ClickClick ] (Element.text "Has click handler"))
    |> Element.below [ Element.el Btn [] <| Element.text "Added below without click handler" ]

[alvivi]

Similar problem here. In my case, children elements don't receive mouse events (enter, leave, over, out). Using an el container solves the issue.