js按钮的click事件，给Input（submit）按钮添加事件监听addEventListener存在问题

最新推荐文章于 2024-04-26 15:38:04 发布

weixin_45881103

最新推荐文章于 2024-04-26 15:38:04 发布

阅读量3.4k

点赞数

分类专栏： JS 文章标签： js

本文链接：https://blog.csdn.net/weixin_45881103/article/details/118250817

版权

2 篇文章 0 订阅

订阅专栏

一、提交按钮的点击事件

目的：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中的submit按钮更换成butten

<form>
    <input type="butten" class="logbtn" value="Login" id="test">
</form>

没有默认行为的按钮，上面显示 value 属性的值，默认为空。

四、Input详讲

*这只是个人在做大作业是遇到的问题，解决方法并不完美，个人水平有限，仅仅提供一种解决思路。如果您有宝贵的意见以或者更好的解决方法，欢迎在下方留言。

关注