Question

我在点击选择区域有javascript函数（使用Raphael）。双击此功能应添加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);          
    }            
};

我遇到不同浏览器的问题：

在Chrome中，它的效果非常好
在Firefox（8.0）中，双击不适用于可以单击的元素（area.Element1，[...]，area.Element63）。双击应在单击的位置添加标记。
在IE（9）中，既不点击也不点击双击。甚至'onmouseout'事件也不适用于IE。

我必须让它在Firefox和IE中运行。我能做些什么才能让它发挥作用 - 特别是在Firefox中？

非常感谢任何帮助！

Answer 1

不支持在任何元素上放置click和dblclick处理程序。

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

来自the docs：

不建议将处理程序绑定到同一元素的click和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);
        }
    };

您可以将think添加到doubleClick和singleClick函数。

单击并双击不在Firefox和IE中工作

2 个答案: