1

在我正在处理的页面中，我有这个 HTML（简化版本；原始版本有点复杂）。

<a href="alink.php" >
    <b>1</b>
    <span name="aName" data-editable="text" ></span>
    <span class="type">numeric</span>
</a>

然后我有一个允许“编辑模式”的系统。
对模式的编辑将 HTML 更改为：

<a href="alink.php" >
    <b>1</b>
    <span name="aName" data-editable="text" ><input name="aName" type="text"></span><img src="ok.png"><img src="x.png"></span>
    <span class="type">numeric</span>
</a>

问题如下：
当用户点击输入时，我怎样才能让用户点击的carret没有发生任何其他事情？

为此，我尝试了以下操作：如果我使用 preventDefault()，则不会将用户发送到链接，但 carret 也不会定位在用户单击的位置。
如果我使用 stopPropagation()，则不会阻止任何内容，单击链接。
如果我同时使用两者，则与 preventDefault() 发生的情况相同。

我认为一种可能的解决方案是摆脱<a>并用不同的标签替换它，比如<span>标签。由于该系统的工作原理，我只是不想这样做。如果您认为有一个不错的选择，请说明。

请没有图书馆的例子或答案

编辑：根据要求，我的相关 js 代码：

this.editableElement = document.createElement('input');
this.editableElement.type = "text";
this.editableElement.onclick = function (e){
    e.preventDefault();
    e.stopPropagation();
}.bind(this);
this.editableElement.name = this.parent.getAttribute('name');
this.editableElement.value = this.currentText;

Edit2: jsfiddle 按要求。 http://jsfiddle.net/brunoais/gZU8C/

现在尝试将插入符号放在您单击的位置。您将检查输入是否被选中，链接没有被点击，但插入符号没有放置在您单击的位置。

4

0 回答 0