Qtip2爲文本菜單沒有出現在谷歌瀏覽器

環境： - 的jQuery 1.9.1 - qtip2：2.0.1-35Qtip2爲文本菜單沒有出現在谷歌瀏覽器

我遇到綁定爲右鍵單擊一個qtip2開幕一個奇怪的問題（作爲contextmenu替換，跟在official tutorial之後）。

在Firefox上，一切順利，只要右鍵單擊目標元素，contextmenu就會顯示出來。在Chrome上，出於未知原因，我必須左鍵單擊然後右鍵單擊目標才能獲得qtip工作。

奇怪的是，它正常工作與這個小提琴兩種瀏覽器： http://jsfiddle.net/PaQ7R/10/

完全相同的源代碼。

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title> - jsFiddle demo</title> 
     <script src="jquery/jquery-1.9.1.js"></script> 
     <script type='text/javascript' src="jquery/jquery.qtip.js"></script> 
     <link rel="stylesheet" type="text/css" href="css/jquery.qtip.css"> 
    <style type='text/css'> 
     ul#candMenu { 
      display: none; 
     } 
    </style> 
<script type='text/javascript'> 
$(document).ready(function() { 
    $(document).on("mousedown", ".test", function(event) { 
     $(this).qtip({ 
      content: { 
       text: $("#candMenu").clone() 
      }, 
      show: { 
       event: "mouseup", 
       ready: true, 
       solo: true 
      }, 
      hide: { 
       event: "unfocus" // Si qqchose d autre que le tooltip est cliqué 
      }, 
      position: { 
       my: "left top", 
       target: "mouse", // Position it where the click was... 
       adjust: { mouse: false }, // ...but dont follow the mouse 
       viewport: $(window) // empêche le débordement de la fenêtre 
      }, 
      events: { 
       show: function(eventShow, api) { 
        if(eventShow.originalEvent.which !== 3) { 
         eventShow.preventDefault(); 
        } 
       } 
      } 
     }, event); 
    }).bind("contextmenu", function() { return false; }); 
}); 

</script> 
</head> 
<body> 
    <a href="javascript:;" class="test">Test right click</a><br /> 
    <a href="javascript:;">No-test</a> 

<table border="1" width="100%"> 
    <tr class="test"> 
     <td>prem</td> 
     <td>seco</td> 
     <td>third</td> 
    </tr> 
    <tr class="test"> 
     <td>prem</td> 
     <td>seco</td> 
     <td>third</td> 
    </tr> 
</table> 
<UL id="candMenu"> 
    <LI class="event separator"><A href="javascript:;">Événements<SPAN class="holdctrl"></SPAN></A></LI> 
     <LI class="edit"><A href="javascript:;">Infos du candidat<SPAN class="holdctrl"></SPAN></A></LI> 
     <LI class="permis"><A href="javascript:;">Demande de permis<SPAN class="holdctrl"></SPAN></A></LI> 
     <LI class="prod"><A href="javascript:;">Produits<SPAN class="holdctrl"></SPAN></A></LI> 
     <LI class="regle"><A href="javascript:;">Règlements<SPAN class="holdctrl"></SPAN></A></LI> 
     <LI class="form"><A href="javascript:;">Formation<SPAN class="holdctrl"></SPAN></A></LI> 
</UL> 
</body> 
</html>

我也試過在非SSL環境和相同的奇怪行爲。我無法找到在小提琴環境中存在技巧或在我的服務器上配置錯誤來解釋這種差異。

來源

2013-04-05 ZalemCitizen