Question

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

单击音符/撕裂文本字段内部，然后双击下面的4个TD中的任何一个，在插入/重新发送文本字段中插入相应的HTML实体，甚至删除突出显示的文本并插入当前光标位置。

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

问题是，如果有人在没有dblclicking实体TD的情况下点击note / rend文本字段外，则永远不会删除该dblclick事件处理程序。只有在双击实体并插入该实体之后，才会删除dblclick事件处理程序。

另一个错误是，每次note / rend都被赋予焦点时，会创建并附加一个新的事件处理程序，这样如果我单击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>

Answer 1

我建议在绑定绑定事件时解除绑定事件，防止doubleclick事件被绑定两次。您可能还希望在n秒后解除绑定，或者可能在点击页面上的其他位置后取消绑定。

$("#entities table").off("dblclick","tr")
                    .on("dblclick", "tr",
                           function() {
                               //do stuff 
                           });

jQuery .on / .off事件处理，顺序和正确删除

1 个答案: