单击并双击不起作用的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）双击没有对可以同时点击了（区域要素的工作。 Element1，[...]，area.Element63）。双击应该在被点击的地方添加标记。
• 在IE（9）中既没有点击也没有双击工程。即使'onmouseout'事件也不适用于IE。

我必须使它在Firefox和IE中工作。我能做些什么来使其工作 - 特别是在Firefox中？

这里的任何帮助非常感谢！

Answer 1

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

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函数。

Answer 2

将click和dblclick处理程序放在任何元素上都不太好。

如果不进行特殊的自定义处理，您可能无法使其正常工作，甚至无法正常工作，因为浏览器双击时间是用户可配置的。它通常会导致无障碍问题，并且通常会导致不良的用户体验。

从the docs：

是不可取的处理程序绑定到点击的相同元素DBLCLICK事件两者。触发事件的顺序因浏览器而异，其中一些在dblclick之前收到两个点击事件，而另一些则只收到一个事件。双击灵敏度（双击检测到的最大点击时间）可能因操作系统和浏览器而异，并且通常可由用户配置。