Question

我只是添加span作为文本选择的父级。我通过弹出按钮（在选择上会出现）使用点击按钮另外两种方式进行一次

当我多次单击弹出按钮时，我会被多次（多次）作为我选择的父级附加。

如何解决这个问题？任何人帮助我？

myjs：

 function selHTML() {
    var nNd = document.createElement("span");
    var w = getSelection().getRangeAt(0);
    w.surroundContents(nNd);
    $(nNd).addClass('highlight');
}

$("#addText").on('click',  function(event) {
    event.preventDefault();
    $(selHTML());
});

$("div.content").mouseup(function(event) {
    var range = window.getSelection().getRangeAt(0);
    if (!range.collapsed) {
        var bounds = range.getBoundingClientRect();
        var x = bounds.left + ((bounds.right - bounds.left - $(".savetooltipAll").outerWidth()) / 2);
        var y = bounds.top - $(".savetooltipAll").outerHeight() + $(window).scrollTop();

        $(".savetooltipAll").css("top", (y+(bounds.top)) + 'px');
        $(".savetooltipAll").css("left",x + 'px');
        $(".savetooltipAll").show();
        $("button").click(function(){
            $(selHTML()); //it calls multiple times...
        });
    } else {
        $(".savetooltipAll").hide();
    }
});

$("div.content").mousedown(function(event) {
    var range = window.getSelection();
    console.log(range.type);
});

Live Demo

Answer 1

每次调用.click处理程序时，您都会（重新）注册.mouseup处理程序。

只需在处理程序之外执行一次。

Aldo，不要在$()的调用周围写selHTML() - 它正在调用jQuery，但如果你丢弃了结果就没有效果。

Answer 2

$("button").on('click', function(){
          selHTML(); //it won't call multiple times... :)
      });

$("div.content").mouseup(function(event) {
    var range = window.getSelection().getRangeAt(0);
    if (!range.collapsed) {
      var bounds = range.getBoundingClientRect();
      var x = bounds.left + ((bounds.right - bounds.left - $(".savetooltipAll").outerWidth()) / 2);
      var y = bounds.top - $(".savetooltipAll").outerHeight() + $(window).scrollTop();

      $(".savetooltipAll").css("top", (y+(bounds.top)) + 'px');
      $(".savetooltipAll").css("left",x + 'px');
      $(".savetooltipAll").show();

  } else {
      $(".savetooltipAll").hide();
  }
});

为什么我在点击按钮时会添加多个元素？

2 个答案: