I have an HTML element for which I add an event listener:

1
2
3
4
5
6
7
8
9

    let Rescale =
        JS.Alert("never called!")

    let DoubleClickHandler (event : Dom.Event) =
        JS.Alert("double click")
        Rescale

    let el = JS.Document.GetElementById "cursorCanvas"
    el.AddEventListener("dblclick", DoubleClickHandler, false)

When I double-click on my element, the DoubleClickHander produces an alert, but the Rescale function is never called. It seems like it is being optimized away. Why do I say that? Because if I modify the Rescale function to return a string, and I give that to JS.Alert, then Rescale does appear to be called:

1
2
3
4
5
6
7
8
9
10

    let Rescale =
        JS.Alert("never called!")
        "now it IS called"

    let DoubleClickHandler (event : Dom.Event) =
        JS.Alert("double click")
        JS.Alert(Rescale)

    let el = JS.Document.GetElementById "cursorCanvas"
    el.AddEventListener("dblclick", DoubleClickHandler, false)

Now I get two alerts: "double click" and "now it IS called". But I don't get the "never called!" alert, because now IT seems to be optimized away.

This is a central dilemma for my code, so I hope you can suggest a good workaround, or at least help me understand why Websharper behaves this way.

For extra credit, I would prefer to write my double click handler as many Websharper examples show, using Pagelets. However, I am not generating the element dynamically. Can I attach an event handler using the Pagelet style if my HTML element already exists?