单击跨度会导致移动跨度的模糊事件，因此它不会注册单击

Question

我在输入的右侧有一个跨度，其中都有一些文本。输入具有浏览器选择的任何默认宽度。输入有一个模糊处理程序，可以将其转换为一个新的跨度，其文本与模糊输入中的文本相同。 span 具有相反的操作：点击处理程序将其转换为具有与被点击的 span 中相同文本的新输入。

当输入右侧的跨度被点击时，输入注册它的模糊事件并成为一个跨度，如设计的那样。然而，它也会变得更小（假设文本不是很多），这也是所希望的。这会使单击的跨度移到左侧。

问题：我们现在点击的原span可能不在鼠标指针下，不再注册点击。

HTML:

<input id="write" class="tag" value="stuff"></input>
<span id="read" class="tag">some text</span>

js:

var write = document.getElementById("write");
var read = document.getElementById("read");

var writeOnBlur = function() {
    var newRead = document.createElement("span");
        newRead.className = "tag";
        newRead.innerHTML = this.value;
        newRead.onclick = readOnClick;
        this.parentNode.replaceChild(newRead, this);
        newRead.focus();
}

var readOnClick = function(e) {
    alert("clicked the 'read' node");

    var newWrite = document.createElement("input");
    newWrite.className = "tag";
    newWrite.value = this.innerHTML;
    newWrite.onblur = writeOnBlur;
    this.parentNode.replaceChild(newWrite, this);
    newWrite.focus();
    e.stopPropagation();
}

document.onclick = function() {
    alert("missed the read node. clicked the document.");
}

read.onclick = readOnClick;
write.onblur = writeOnBlur;
write.focus();

看到这个fiddle：http://jsfiddle.net/7s7kbvvf/10/

单击包含 "some text" 的跨度以查看问题。

Answer 1

已更新为基于 Javascript 的解决方案，满足您的需求：

   var switchToInput = function () {
      var input = document.createElement("input");
      input.className = "tag";
      input.type = "text";
      input.innerHTML = this.value;
      this.parentNode.replaceChild(input, this);
      input.onblur = switchToSpan;
      input.select();
  };
  var switchToSpan = function () {
      var span = document.createElement("span");
      span.className = "tag";
      span.innerHTML = this.value;
      this.parentNode.replaceChild(span, this);
      span.onclick = switchToInput;
  }
  var tags = document.getElementsByClassName('tag');
  for (var i = 0, limit = tags.length; i < limit; i++) {
      tags[i].onclick = switchToInput;
  }

已更新 fiddle：http://jsfiddle.net/7s7kbvvf/9/

Answer 2

我能够通过允许父节点（或者为了简单起见，在我这里的示例中，文档）处理事件来找到一个合适的解决方案。该文档跟踪当前的 "write tag"（输入），以便在单击 "read tag"（跨度）时，它可以先用新的输入替换跨度，然后用新的跨度替换当前输入，两者都在单击一下。由于跨度首先被新输入替换，因此一旦现有输入变成新跨度，它移动并不重要。

新的js（或者看这个fiddle）：

var write = document.getElementById("write");
var read = document.getElementById("read");
var currWrite = write;
write.focus();

document.onclick = function(e) {
    var target = e.target;
    if (target && target.nodeName === "SPAN") {
        var newWrite = document.createElement("input");
        newWrite.className = "tag";
        newWrite.value = target.innerHTML;
        target.parentNode.replaceChild(newWrite, target);
    }
    if (currWrite !== null) {
        var newRead = document.createElement("span");
        newRead.className = "tag";
        newRead.innerHTML = currWrite.value;
        currWrite.parentNode.replaceChild(newRead, currWrite);
        currWrite = null;
    }
    if (newWrite) {
        currWrite = newWrite;
        newWrite.focus();
    }

}

单击跨度会导致移动跨度的模糊事件，因此它不会注册单击

Click on a span causes blur event which moves the span so that it doesn't register click

javascript

dom