2

jsFiddle: http://jsfiddle.net/fThMa/2/

メモ/レンド テキスト フィールド内をクリックしてから、下の 4 つの TD のいずれかをダブルクリックすると、メモ/レンド テキスト フィールドに適切な HTML エンティティが挿入され、強調表示されたテキストが削除され、現在のカーソル位置に挿入されます。

何が起こるか: ノートをクリックし、次にエンティティをダブルクリックし、エンティティをもう一度ダブルクリックします。結果は、カーソルがあったメモ テキスト フィールドに挿入された 1 つのエンティティであり、さらにダブル クリック イベントが停止します。

問題は、だれかがエンティティ TD を dblclick せずに note/rend テキスト フィールドの外側をクリックすると、その dblclick イベント ハンドラが削除されないことです。エンティティをダブルクリックしてそのエンティティを挿入するまで、dblclick イベント ハンドラは削除されません。

もう 1 つのバグは、note / rend にフォーカスが与えられるたびに、新しいイベント ハンドラーが作成されてアタッチされるため、note / rend を数回クリックしてからエンティティをダブルクリックすると、最初にクリックするたびにそのエンティティが挿入されることです。ノート/レンド。

これを一度だけ起動し、単一のイベント ハンドラーのみを作成するには、どのような方法が最適でしょうか?

.off を .on の外側に移動すると、設定されるとすぐに .on が削除され、.on 内の関数が実行されなくなります。

(function ($, undefined) {
        $.fn.getText = function() {
            var elem = $(this).get(0);
            var posStart = 0;

            if('selectionStart' in elem) {
                if (elem.selectionStart > elem.selectionEnd) {
                    posEnd = elem.selectionStart;
                    posStart = elem.selectionEnd;
                } else {
                    posEnd = elem.selectionEnd;
                    posStart = elem.selectionStart;
                }
                if (posStart != posEnd) {
                    $(elem).val($(elem).val().substring(0, posStart) + $(elem).val().substring(posEnd));
                }
            }
            return posStart;
        }
    })(jQuery);

    $(document).ready(function() {
        $("#attributes table tr td").on("blur", "input", function(event) {
            var elem = $(this);
            $("#entities table").one("dblclick", "tr", function(event) {
                var cursorPos = $(elem).getText();
                var entity = $(this).children(":first").children(":first").val();
                var beg = $(elem).val().substring(0, cursorPos);
                var end = $(elem).val().substring(cursorPos);
                $(elem).val(beg + entity + end);
                $("#entities table").off("dblclick", "tr");
            });
        });
    });​

<div id="attributes">
  <table>
    <form>
      <tr>
        <td><p>note</p></td>
        <td><input id="note" name="note" type="text" value="note"></td>
      </tr>
    </form>
    <form>
      <tr>
        <td><p>rend</p></td>
        <td><input id="rent" name="rend" type="text" value="rend"></td>
      </tr>
    </form>
  </table>
</div>
<div id="entities">
  <table>
    <form>
      <tr>
        <td><input id="ent1-val" hidden="true" type="text" value="&amp;lt;"></td>
        <td><input id="ent1-vis" type="text" value="<"></td>
        <td><input id="ent1-name" type="text" value="Less Than"></td>
      </tr>
    </form>
    <form>
      <tr>
        <td><input id="ent2-val" hidden="true" type="text" value="&amp;gt;"></td>
        <td><input id="ent2-vis" type="text" value=">"></td>
        <td><input id="ent2-name" type="text" value="Greater Than"></td>
      <tr>
    </form>
  </table>
</div>​
4

1 に答える 1

1

イベントをバインドするイベントがトリガーされたときにイベントのバインドを解除し、ダブルクリック イベントが 2 回バインドされるのを防ぐことをお勧めします。n 秒後、またはページのどこかをクリックした後にバインドを解除することもできます。

$("#entities table").off("dblclick","tr")
                    .on("dblclick", "tr",
                           function() {
                               //do stuff 
                           });
于 2012-10-18T18:49:19.727 に答える