Щелчок и двойной щелчок не работают в Firefox и IE

Question

У меня есть функция javascript (которая использует Рафаэля), которая нажимает на область выбора. При двойном щелчке эта функция должна добавить маркер (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);          
    }            
};

А у меня проблема с разными браузерами:

• В Chrome он работает почти хорошо
• В Firefox (8.0) двойной щелчок не работает с элементами, на которые также можно нажать (area.Element1, [...], area.Element63). Двойной щелчок должен добавить маркер на место, на которое нажали.
• В IE (9) не работает ни щелчок, ни двойной щелчок. Даже событие onmouseout не работает в IE.

Я должен заставить его работать в Firefox и IE. Что я могу сделать, чтобы это работало - особенно в Firefox?

Любая помощь здесь очень ценится!

Answer 1

Недопустимо использовать обработчик click и dblclick для любого элемента.

Вы, вероятно, не сможете заставить его работать правильно без специальной пользовательской обработки.и даже это не будет работать хорошо, потому что время двойного щелчка в браузере настраивается пользователем.Как правило, это вызывает проблемы с доступностью и, как правило, приводит к ухудшению работы пользователя.

Из документов :

Нельзя связывать обработчики с обоимии dblclick события для того же элемента.Последовательность запускаемых событий варьируется от браузера к браузеру: одни получают два события щелчка до dblclick, а другие - только одно.Чувствительность к двойному щелчку (максимальное время между щелчками, определяемое как двойной щелчок) может варьироваться в зависимости от операционной системы и браузера и часто настраивается пользователем.

Answer 2

Если вам нужно использовать как щелчок, так и двойной щелчок, вы можете попробовать добавить таймер.Это будет выглядеть так:

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);
        }
    };

Вы можете добавить мысли в функции doubleClick и singleClick.