單擊並雙擊不起作用的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之前收到兩個點擊事件，而另一些則只收到一個事件。雙擊靈敏度（雙擊檢測到的最大點擊時間）可能因操作系統和瀏覽器而異，並且通常可由用戶配置。