在Firefox和IE中不工作的点击和双击

Click and double click not working in Firefox and IE

本文关键字：工作 双击 Firefox IE      更新时间：2023-09-26

我有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)中，双击不工作的元素，也可以点击(区域)。Element1,[…】,area.Element63)。双击应该会在点击的位置添加标记。
  • 在IE(9)中，点击和双击都不起作用。即使'onmouseout'事件也不能在IE上工作。

我必须让它在Firefox和IE中工作。我该怎么做才能让它工作呢——尤其是在Firefox中?

这里的任何帮助都是非常感激的!

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

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

From the docs:

不建议将处理程序绑定到同一元素的click和dblclick事件。触发的事件顺序因浏览器而异，有些浏览器在dblclick之前接收两个单击事件，而其他浏览器只接收一个。双击灵敏度(被检测为双击的两次点击之间的最长时间)可能因操作系统和浏览器而异，并且通常是用户可配置的。

如果你必须同时使用点击和双击，你可以尝试添加计时器。它看起来像这样:

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函数中添加think

相关文章：