Question

我有一个按钮，当点击它时，它会显示一个下拉列表，而且，不仅显示下拉列表，还允许用户通过在按钮内添加输入来更改为特定值。我无法改变这种行为，因为它是像tinyMCE，Summernote等的RTE。所以该工具被添加为按钮。

问题是，当尝试点击Firefox中的输入时，它会冒泡到按钮，因此事件被父按钮吞没而不是输入。 Chrome工作正常，但Firefox遇到stopPropagation的问题。

这是一个片段，因此您可以在Firefox＆amp;铬。

var button = document.getElementById('button');
var input = document.getElementById('input');

button.onclick = function () {
    alert('button was pressed');
}
input.onclick = function (e) {
    
    e.stopPropagation();
    
    alert('input was pressed');
}

<button class="btn btn-primary" onclick="button()" id="button">button
    <input placeholder="input" onclick="input()" id="input"/>
</button>

有关此问题的解决方法吗？

提前致谢。

Answer 1

将输入置于按钮内部不是语义HTML。将按钮更改为<div>或<span>，这应该可以正常工作。旁注-您还将在IE中遇到此问题。

点击Firefox中的输入内部按钮

1 个答案: