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

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;
}