单击跨度会导致模糊事件,该事件会移动跨度,使其不注册单击
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/
单击包含"某些文本"的范围以查看问题。
更新为基于 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;
}
更新的小提琴: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();
}
}
相关文章:
- 将单击事件添加到数据表
- 将单击事件添加到附加的项目中
- 在IE8中不起作用的元素上触发单击事件
- 链接上的IE10 jquery句柄单击事件不起作用
- 如何使用纯 JavaScript 在所有浏览器中区分左/右/中键单击事件
- 如何在master中调用细节网格作为单击事件
- 兰吉 |如何在 span 标签上使用单击事件删除突出显示的文本
- 如何隐藏按钮单击事件上的占位符
- 复选框,然后单击事件处理
- 如何使用for循环添加所有按钮'单击事件
- 手柄'img'单击事件并插入'alt'使用jQuery将属性转换为文本框
- 覆盖单击事件不起作用
- 单击事件打开两个弹出菜单
- 单击事件不起作用
- 从其他元素上的单击事件访问image src属性
- 单击事件中的ajax请求后重定向
- 如何缩放地图框传单中的标记单击事件
- 在没有焦点的情况下捕获画布上的第一次单击事件
- 通过单击事件识别画布上的对象
- 如何将单击事件添加到JQuery中动态添加的元素中