1

説明
コミュニティWebサイトでは、各ユーザーのニックネームはプロフィールページへのリンクですが、ニックネームをダブルクリックすると、このユーザーのメニューがニックネームの下に表示されます。このポップアップメニューのコンテンツは、ajax呼び出しを使用してロードされます。これまで、アンカーhrefで「javascript：」を使用し、JSを使用してシングル/ダブルクリックをキャッチしました。ユーザーがダブルクリックメニューを維持しながら、タブなどでプロファイルリンクを開くことができるように、hrefをクリーンアップして適切なURLを追加したいと考えました。私はそれが最高のデザインではないことを理解しています、それは仕事をすることへのやや執着になっています。

問題
したがって、シングルクリックを通常どおりに動作させ（ブラウザをhrefに送信）、ダブルクリックしてpreventDefaultを実行し、代わりにカスタム関数（イベント）を呼び出します。シングルクリック部分でwindow.locationを使用することでこれを行うことができますが、それは私が改善したかった妥協/ハックのように感じます。

これまでのコード質問1067464の回答1067484
（リンクの投稿は許可されていません）を以下の基礎として使用

    jQuery(document).ready(function($) {
        $("#hello")
            .bind('click', singleClick)
            .bind('dblclick', doubleClick);
    });

    function singleClick(e) {
        e.preventDefault();
        var el = this;
        setTimeout(function() {
        var dblclick = parseInt($(el).data('double'), 10);
            if (dblclick > 0) {
                $(el).data('double', dblclick-1);
            } else {
                $('#result').html('click registered - browser should proceed to url');
                // Attempting to make browser follow original href url:
                $(el).unbind('click', singleClick);
            }
        }, 300);
    }

    function doubleClick(e) {
        $(this).data('double', 2);
        e.preventDefault();
        $('#result').html('double-click registered - browser should stay here');
        // Display dblclick popup-menu here
    }

（ http://jsbin.com/iboyo5/2でライブを参照/編集してください）

このシングルクリック部分が欠けているだけで、window.locationよりも「クリーンな」方法が必要でした。これが.unbind（）をいじっている理由です。これも100％の解決策ではありません。.unbind（）関数は私が望むことを実行しますが、コードの現在の実行のハンドラーをアンロードしないため、2回のシングルクリックごとに1回だけ機能します。これは私が今修正する必要がある問題です。

ところで：最初の.clickが設定された遅延のために一時停止されてもかまいません。URLが「起動」するまで300ms待たなければならないことは問題ありません。
これをあきらめてwindow.locationを使用する必要がありますか？.live（）と.die（）を使用して解決できますか？

ここでの最初の投稿の前に、十分な調査を行ったことを願っています。ありがとう！

4

2 に答える 2

0

他の人が後で同じ機能を必要とする場合に備えて、私たちが最終的に得たものを投稿します。これは、window.locationを使用してpreventDefaultアクションを「元に戻す」ことです。よりクリーンなアプローチを学びたいのですが、今のところこれは解決したままにしておきます。

jQuery(document).ready(function($) {

  /* Member popup menu - Handle single and double clicks for member-links */
  function singleClick(e) {
    e.preventDefault();
    var url = $(this).attr("href");
    var el = this;
    setTimeout(function() {
      var dblclick = parseInt($(el).data('double'), 10);
      if (dblclick > 0) {
        $(el).data('double', dblclick-1);
      } else {
        $('#result').html('click registered - browser should proceed to url');
        window.location = url;
      }
    }, 300);
  }

  function doubleClick(e) {
    e.preventDefault();
    $('#result').html('double-click registered - browser should stay here');
    $(this).data('double', 2);
    var full_id = $(this).attr("id");
    var ids = full_id.split("_");
    var id = ids[1];
    $.ajax({
      url: "....php",
      data: {
        page: "ajax.getMemberPopup",
        id: id
      },
    });
  }

  $(".profile")
    .bind('click', singleClick)
    .bind('dblclick', doubleClick);
  /* End member popup menu */
});
于 2010-11-16T15:54:25.037 に答える
0

次の解決策は、必要な機能を得るのに役立ちます。

マークアップの例:

<a class="profile" href="#">Stewie</a>
<br/>
<a class="profile" href="#">Brian</a>
<br/>
<div id="result"/>

Javascript:

var clickCount = 0;
var clickTimeout;
var currentTarget;

function evaluateClicks(targetElement) {
    if (clickCount === 1) {
        $("#result").text(targetElement.text() + ": clicked once");
    } else if (clickCount > 1) {
        $("#result").text(targetElement.text() + ": clicked twice or more");
    }
    clickCount = 0;
}

$("a.profile").click(function(e) {
    e.preventDefault();
    var targetElement = $(e.target);
    /*check to see if the target's href is the same
    the comparison does not need to be on the href, just something
    so you can differentiate the two elements from each other.
    */
    if (currentTarget && targetElement.attr("href") !== currentTarget.attr("href")) {
        clearTimeout(clickTimeout);
        clickCount = 0;
    }
    currentTarget = targetElement;
    clickCount++;
    var thingToDo = function() {
        evaluateClicks(targetElement);
    };
    //reset the current timeout
    clearTimeout(clickTimeout);
    clickTimeout = setTimeout(thingToDo, 300);
});

要素間の比較は、要素が一意であると仮定して、href 属性に基づいていることに注意してください。

于 2010-11-11T18:20:19.580 に答える