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.