Click and double click not working in Firefox and IE

Question

I have javascript function (that uses Raphael) that on click select area. On double click this function should add marker (pin.png).

    window.onload = function () {
    var R = Raphael("paper", 500, 500);
    var attr = {
        fill: "#EEC7C3",
        stroke: "#E0B6B2",
        "stroke-width": 1,
        "stroke-linejoin": "round"
    };
    var area = {};
    area.Element1 = R.path("...").attr(attr);
    area.Element2 = R.path("...").attr(attr);
    ...
    area.Element63 = R.path("...").attr(attr);  

    var current = null;
    $("#paper").ondblclick = function (e) {
        var relativeX = e.pageX;
        var relativeY = e.pageY;        
        R.image("pin.png", relativeX, relativeY, 22, 22);
    };
    for (var state in area) {
        area[state].color = Raphael.getColor();
        (function (st, state) {
            st[0].active = 0;
            st[0].style.cursor = "pointer";
            st[0].onmouseover = function () {
                current && area[current].animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500) && (document.getElementById(current).style.display = "");
                st.animate({ fill: st.color, stroke: "#ccc" }, 500);
                st.toFront();
                R.safari();
                document.getElementById(state).style.display = "block";
                current = state;
            };
            st[0].onmouseout = function () {
                if (this.active == 0)
                    st.animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500);
                else
                    st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500);
                st.toFront();
                R.safari();
            };
            st[0].onclick = function () {                        
                st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500);
                st.toFront();
                if (this.active == 0)
                    this.active = 1;
                else
                    this.active = 0;
                R.safari();
            };
        })(area[state], state);          
    }            
};

And I have problem with different browsers:

• In Chrome it works almost good
• In Firefox (8.0) double click do not work on elements that can be also clicked (area.Element1, [...], area.Element63). Double click should add marker on place that was clicked.
• In IE (9) neither click nor double click works. Even 'onmouseout' event is not working on IE.

I have to make it work in Firefox and IE. What can I do to make it work - especially in Firefox?

Any help here is much appreciated!

Answer 1

If you have to use both click and double click you can try to add timer. It will look like that:

window.onload = function () {
        var R = Raphael("paper", 500, 500);
        var attr = {
            fill: "#EEC7C3",
            stroke: "#E0B6B2",
            "stroke-width": 1,
            "stroke-linejoin": "round"
        };

var area = {};
area.Element1 = R.path("...").attr(attr);
area.Element2 = R.path("...").attr(attr);
...
area.Element63 = R.path("...").attr(attr);  

        var current = null;

        var timer;
        var firing = false;
        var singleClick = function () { };
        var doubleClick = function () { };
        var firingFunc = singleClick;

        for (var state in area) {
            area[state].color = Raphael.getColor();

            (function (st, state) {
                st[0].active = 0;
                st[0].style.cursor = "pointer";

                st[0].onclick = function (event) {
                    if (firing) {
                        var relativeX = event.pageX - 10;
                        var relativeY = event.pageY - 25;
                        R.image("pin.png", relativeX, relativeY, 22, 22);
                        $('#status2').html(relativeX + ', ' + relativeY);
                        firingFunc = doubleClick;
                        if (this.active == 0) {
                            this.active = 1;
                            st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500);
                            st.toFront();
                        }
                        else {
                            this.active = 0;
                            st.animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500);
                            st.toFront();
                        }
                        R.safari();
                        return;
                    }

                    firing = true;
                    timer = setTimeout(function () {
                        firingFunc();                                                 
                        firingFunc = singleClick;
                        firing = false;
                    }, 250);

                    if (this.active == 0) {
                        this.active = 1;
                        st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500);
                        st.toFront();
                    }
                    else {
                        this.active = 0;
                        st.animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500);
                        st.toFront();
                    }
                    R.safari();
                };
            })(area[state], state);
        }
    };

You can add thinks to doubleClick and singleClick functions.

Answer 2

It isn't well supported to put both a click and dblclick handler on any element.

You probably aren't going to be able to get it to work right without special custom handling, and even that won't work well because browser double-click time is user-configurable. It will generally cause accessibility problems, and usually causes a bad user experience.

From the docs:

It is inadvisable to bind handlers to both the click and dblclick events for the same element. The sequence of events triggered varies from browser to browser, with some receiving two click events before the dblclick and others only one. Double-click sensitivity (maximum time between clicks that is detected as a double click) can vary by operating system and browser, and is often user-configurable.