5

サイトメニューでのユーザークリックをキャッチするメソッドを作成しようとしていますが、主に、ユーザーがアンカータグにカーソルを合わせると、正常に動作する（リンクを表示する）プロセスをユーザーに対してサイレントにする必要があります。含む）。私はこれを行うためにさまざまな方法で試しましたが、今ではほとんど機能しています。私のコードは次のとおりです。

<div class="selectNode" id="selectNode_1" style="color: rgb(229, 229, 229); background-color: rgb(47, 47, 47); ">
  <a href="http://www.google.com" class="selectAnchor" style="color: rgb(229, 229, 229); ">
    Google
  </a>
  <img class="childImage" src="icon.png">
</div>

そしてjQueryには、次のものがあります。

$(".selectAnchor, .menuAnchor").click(function(event){
    event.stopPropagation();
    console.log(event.target.nodeName);
    //event.preventDefault();

    $.ajax({
      type: 'POST',
      url: 'http://localsite/menuRedirect.php',
      data: {id:0, module:'Module',source:'Source'},
      complete: function(data){
        console.log("DONE");
        return true;
      }
    });
});

リンクは選択したページにリダイレクトされますが、ajaxコードが終了することはないため、ユーザーのクリックが登録されることはありません。

event.preventDefaultを使用しようとしましたが、キャンセルされたイベントを再開する方法がありません。

問題の一部は追加機能に起因します。たとえば、ほとんどのユーザーはアンカータグを右クリックして新しいタブで開き（またはコントロール+クリック、またはミドルクリックを使用）、次のようなものを使用します。

<a href="javascript:saveClick(o)">Google</a>

サイトへのアクセスは許可されていません（セキュリティ上の理由から）。

これをどのように行うことができるかについての提案はありますか？

4

3 に答える 3

14

使用event.preventDefaultし、成功した場合は、location.href = self.href

$(".selectAnchor, .menuAnchor").click(function(event){
    event.preventDefault();
    console.log(event.target.nodeName);
    var self = this;

    $.ajax({
      type: 'POST',
      url: 'http://localsite/menuRedirect.php',
      data: {id:0, module:'Module',source:'Source'},
      complete: function(data){
        console.log("DONE");
        location.href = self.href;
      }
    });
});

または、コンテキストプロパティを使用して削除しますvar self = this

$(".selectAnchor, .menuAnchor").click(function(event){
    event.preventDefault();
    console.log(event.target.nodeName);

    $.ajax({
      type: 'POST',
      context: this,
      url: 'http://localsite/menuRedirect.php',
      data: {id:0, module:'Module',source:'Source'},
      complete: function(data){
        console.log("DONE");
        location.href = this.href;
      }
    });
});
于 2012-09-19T18:31:50.840 に答える
1

最新のChromeブラウザはajaxリクエストを完了しません。ブラウザページがユーザーから新しいURLリクエストを受け取ったため、ブラウザはすぐにスレッドを強制終了します。

98％の場合、ネットワークタブでajaxリクエストがキャンセルされたことがわかります。

したがって、解決策はsendBeaconAPIを使用することです。これにより、POSTリクエストが非同期で実行されます。Google Analyticsは、このコードを使用してイベント追跡を実行します（例：クリック）。
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon

 navigator.sendBeacon("{{url}}", param);
于 2019-06-20T09:21:05.650 に答える
0

これを試して

<div class="selectNode" id="selectNode_1" style="color: rgb(229, 229, 229); background-color: rgb(47, 47, 47); ">
  <a href="#" class="selectAnchor" style="color: rgb(229, 229, 229); ">
    Google
  </a>
  <img class="childImage" src="icon.png">
</div>

次に、jqueryでこれを行います。

$(".selectAnchor, .menuAnchor").click(function(event){
    event.preventDefault();
    console.log(event.target.nodeName);
    //event.preventDefault();

    $.ajax({
      type: 'POST',
      url: 'http://localsite/menuRedirect.php',
      data: {id:0, module:'Module',source:'Source'},
      complete: function(data){
        console.log("DONE");
        window.location = "http://www.google.com"
      }
    });
});
于 2012-09-19T18:31:41.143 に答える