0

環境: - jquery 1.9.1 - qtip2: 2.0.1-35

右クリック用にバインドされたqtip2を開くと、奇妙な問題が発生します(コンテキストメニューの置き換えとして、公式のチュートリアルに従ってください)。

Firefox では、すべてがうまくいき、ターゲット要素を右クリックするとすぐにコンテキスト メニューが表示されます。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 環境でも同じ奇妙な動作を試しました。その違いを説明するために、フィドル環境にトリックがあるのか​​、サーバーに設定ミスがあるのか​​ わかりません。

4

1 に答える 1

0

これは、ユーザー プロファイルで関連するすべてのファイルを削除した後、Chrome を再インストールすることで解決しました。

于 2013-04-11T11:38:51.390 に答える