在按鈕內輸入； 防止輸入點擊觸發按鈕點擊但仍然能夠輸入值

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