form 表单 input 敲击回车冒泡会触发附近button的click事件

超、凢脫俗 2022-12-20 08:41 109阅读 0赞

<!DOCTYPE html>
    <html>
    <body>
    
    <form action="/demo/demo_form.asp">
    First name:<br>
    <input type="text" name="firstname" value="Mickey">
    <button onclick="changeText('button')">button</button>
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit">
    </form> 
    <script>
    function changeText(str) {
        alert(str);
    }
    </script>
    <p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70][]

原因：button 对象的 type 属性有 submit、button、reset 三种类型，默认是 submit。所以不加 type="button" 的时候回车当做 submit 调用。

**解决办法一：**监听 input 的 keydown 事件，如果是键盘回车键按下，则阻止默认事件

增加  
function keydown(event) \{  
    if(event.key === 'Enter')\{  
        event.preventDefault();  
    \}  
\}

<!DOCTYPE html>
    <html>
    <body>
    
    <form action="/demo/demo_form.asp" οnsubmit="return false;">
    First name:<br>
    <input type="text" name="firstname" value="Mickey" onkeydown="keydown(event)">
    <button onclick="changeText('button')">button</button>
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit">
    </form> 
    <script>
    function changeText(str) {
        alert(str);
    }
    function keydown(event) {
        if(event.key === 'Enter'){
        	event.preventDefault();
        }
    }
    </script>
    <p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
    
    </body>
    </html>

**解决办法二：** 给button加上type="button"

<!DOCTYPE html>
    <html>
    <body>
    
    <form action="/demo/demo_form.asp">
    First name:<br>
    <input type="text" name="firstname" value="Mickey">
    <button type="button" onclick="changeText('button')">button</button>
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit">
    </form> 
    <script>
    function changeText(str) {
        alert(str);
    }
    </script>
    <p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
    
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70]: /images/20221120/d556235ae46b4f11bff98f1c62a724b1.png