![](/img/trans.png)
[英]Click Event doesn't working for dynamically generated id of an span element
[英]Click on a span causes blur event which moves the span so that it doesn't register click
我在输入的右边有一个跨度,其中都包含一些文本。 输入具有浏览器选择的任何默认宽度。 输入具有模糊处理程序,可以将其转换为新的跨度,并具有与模糊输入相同的文本。 该跨度具有相反的操作:单击处理程序可将其转换为具有与单击跨度相同文本的新输入。
单击输入右边的跨度时,输入会注册它的模糊事件,并按照设计成为跨度。 但是,它也会变小(假设文本不多),这也是需要的。 这使单击的跨度移到左侧。
问题:我们现在单击的原始范围可能不在鼠标指针下方,并且不再注册该点击。
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();
看到这个小提琴: http : //jsfiddle.net/7s7kbvvf/10/
单击包含“某些文本”的跨度以查看问题。
更新为基于Java的解决方案以实现所需的功能:
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;
}
更新的提琴: http : //jsfiddle.net/7s7kbvvf/9/
我能够通过允许父节点(或者为了简单起见,在本文中为文档)处理事件来找到一个不错的解决方案。 该文档跟踪当前的“写入标签”(输入),以便单击“读取标签”(范围)时,它可以先用新的输入替换范围,然后用新的范围替换当前的输入,一次单击即可。 由于跨度首先被新的输入替代,因此一旦现有输入变为新的跨度,它将移动。
新的js(或参见此小提琴 ):
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();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.