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

Question

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

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

但它也会阻止任何内容输入到输入中！ 或者至少它是不可见的。可能是因为我修改了输入的默认事件处理。

有没有办法点击输入，而不是让按钮触发它自己的点击事件（即按钮保持独立（即使我已经将输入 inside）），并且有输入工作正常吗？

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

Answer 1

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

您只需要在输入中添加e.stopPropagation(); 即可阻止点击事件冒泡到父元素。

您的文字不可见，因为它是白色的。把输入中文字的颜色改成黑色就可以了。

#input {
    color: #000;
}