一、提交按钮的点击事件
目的:html中表单按钮,想给提交按钮添加一个点击事件,当点击时实现相应函数功能。
存在问题:点击页面函数执行很快,结果不正确。如图:
(1)、HTML部分代码
<form>
<input type="submit" class="logbtn" value="Login" id="test">
</form>
(2)、JavaScript部分代码
let test=document.getElementById('test');
test.addEventListener("click",function(){
console.log("111");
});
二、原因:submit按钮有一个默认的提交点击事件
submit
类型的 元素被渲染成按钮. 当
click (en-US)
事件发生时(用户点击按钮是一个典型的点击事件), 用户代理 试图提交表单到服务器.
- HTML(超文本标记语言) | MDN (mozilla.org)
三、解决:将HTML中的submit按钮更换成butten
<form>
<input type="butten" class="logbtn" value="Login" id="test">
</form>
button | 没有默认行为的按钮,上面显示 value 属性的值,默认为空。 |
四、Input详讲
:输入(表单输入)元素 - HTML(超文本标记语言) | MDN (mozilla.org)
*这只是个人在做大作业是遇到的问题,解决方法并不完美,个人水平有限,仅仅提供一种解决思路。如果您有宝贵的意见以或者更好的解决方法,欢迎在下方留言。