2

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

在注释/渲染文本字段内单击，然后双击下面的 4 个 TD 中的任何一个，将适当的 HTML 实体插入注释/渲染文本字段，甚至删除突出显示的文本并插入到当前光标位置。

应该发生的是：单击注释，然后双击一个实体，然后再次双击一个实体。结果应该是 1 个实体插入到光标所在的注释文本字段中，并且进一步的双击事件停止。

问题是，如果有人在没有 dblclick 实体 TD 的情况下单击注释/渲染文本字段之外，则永远不会删除该 dblclick 事件处理程序。只有在他们双击一个实体并插入该实体之前，才会删除 dblclick 事件处理程序。

另一个错误是，每次 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

我建议在触发绑定它的事件时取消绑定该事件，防止双击事件被绑定两次。您可能还想在 n 秒后取消绑定，或者可能在单击页面上的其他位置之后取消绑定。

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