javascript - 在按钮内输入；防止输入点击触发按钮点击但仍然能够输入值

Question

我在按钮内有一个输入。我希望用户能够单击输入，输入一些值，然后单击外部按钮。

<button onclick="button()">button
    <input onclick="input()"></input>
</button>

然而，问题是默认行为是点击输入也会触发按钮输入，原因很明显(输入在按钮内)。

所以我试图抑制输入事件的启动和传播

button.onclick = function () {
    alert('button was pressed');
}
input.onclick = function (e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
    alert('input was pressed');
}

但它也可以防止任何内容被输入到输入中! 或者至少它是不可见的。可能是因为我摆弄了输入的默认事件处理。

有没有办法点击输入，而不是让按钮触发自己的点击事件(即按钮保持独立(即使我已经将输入放在里面))，并且有输入像往常一样工作吗？

http://jsfiddle.net/laggingreflex/wmcrhLoz/

Answer 1

给你:http://jsfiddle.net/wmcrhLoz/2/

您只需要在输入中使用 e.stopPropagation(); 来阻止点击事件冒泡到父元素。

您的文本不可见，因为它是白色的。将输入中的文本颜色更改为黑色就可以了。

#input {
    color: #000;
}