含<form>与不含<form>时下拉菜单的异常行为原因咨询

问题代码 #

<div class="my-page">
            <!-- <form id="my-form"> -->
                <h2>Clickable Dropdown</h2>
                <p>Click on the button to open the dropdown menu.</p>
                <fieldset id="my-fieldset">
                    <div class="dropdown">
                        <button onclick="myFunction()" class="dropbtn">1234</button>
                        <div id="File1" class="dropdown-content">
                            <a href="#1">1</a>
                            <a href="#2">2</a>
                            <a href="#3">3</a>
                            <a href="#4">4</a>
                        </div>
                    </div>
                </fieldset>
            <!-- </form> -->
        </div>

异常原因 #

问题出在form标签内的button默认type为submit：当启用form标签后，点击按钮时，浏览器会默认触发表单提交行为——由于form没有指定action属性，页面会刷新当前地址，导致下拉菜单刚通过myFunction()显示出来，就被页面刷新重置，看起来功能异常。

解决方法 #

给按钮明确指定type="button"，让浏览器知道这只是个普通功能按钮，不会触发表单提交：

<button type="button" onclick="myFunction()" class="dropbtn">1234</button>

内容的提问来源于stack exchange，提问作者Vladimir Vasilchuk