javascript - 单击和双击在 Firefox 和 IE 中不起作用

Question

我有 javascript 函数(使用 Raphael)，单击选择区域。双击此函数应添加标记 (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 处理程序。

如果没有特殊的自定义处理，您可能无法使其正常工作，即使这样也无法正常工作，因为浏览器双击时间是用户可配置的。它通常会导致可访问性问题，并且通常会导致糟糕的用户体验。

来自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.