Qtip2가의 ContextMenu는 구글 크롬에 표시되지

환경 : - JQuery와 1.9.1 - qtip2 : 2.0.1-35 나는대로 (오른쪽 클릭에 대한 바인더 제본 qtip2의 개통과 함께 이상한 문제가 발생Qtip2가의 ContextMenu는 구글 크롬에 표시되지

컨텍스트 메뉴 대체, 다음은 official tutorial).

firefox에서는 대상 요소를 마우스 오른쪽 버튼으로 클릭하자마자 상황이 모두 잘되고 상황에 맞는 메뉴가 나타납니다. Chrome에서 알 수없는 이유로 qtip 작업을 수행하려면 대상을 마우스 오른쪽 버튼으로 클릭해야합니다.

My test environment

이상한 것은

는이 바이올린 함께 두 브라우저에서 제대로 작동하는지입니다 : 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