<button>标签与input<type=“button“>绑定事件失效

本文揭示了在HTML中,button标签与input[type='button']类型元素绑定事件失效的问题,原因可能是CSS中的浮动影响。提供了解决方案:检查并移除可能导致事件绑定问题的浮动样式,确保事件处理正常工作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

            ##<button>标签与input<type="button">绑定事件失效
            解决方法:查询这两个标签的css样式是否存在float(浮动),如果有,去掉浮动效果。绑定事件生效
``` <%@ page language="java" import="test_package.*" import="java.util.*" import="java.sql.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel = "stylesheet" href = "../style/account_set.css"> </head> <body> <% List<test_information> list=new ArrayList<>(); try{ Class.forName("com.mysql.cj.jdbc.Driver"); String url="jdbc:mysql://localhost:3306/washcustomer"; String username="root"; String password="zqz20011222."; Connection c =DriverManager.getConnection(url,username,password); Statement s=c.createStatement(); String sql="select * from clothes"; ResultSet rs= s.executeQuery(sql); while(rs.next()) { String expected_time; if(rs.getString("expected_time").compareTo("点击选择时间")==0) { expected_time="未选择时间"; } else { expected_time=rs.getString("expected_time"); } test_information clothes=new test_information(rs.getString("material"),rs.getString("owner_tel"),rs.getString("start_time"),expected_time,rs.getInt("price"),rs.getString("washing_method"),rs.getString("clothes_state"),rs.getString("bill_state"),rs.getString("number")); list.add(clothes); } } catch(SQLException e) { e.printStackTrace(); System.out.println("操作失败"); } %> <tit >当前账套</tit> <input type = "button" value = "添加账套" onclick = "add_account.show()" class = "add_a"> <table border=1 class="t"> <tr> <th class = "name">单位名称</th><th class = "id">纳税人识别号</th><th class = "func">操作</th><th class = "func">删除</th></tr> <%for(test_information news:list) {%> <tr> <th class = "name"><%=news.getMaterial() %></th> <th class = "id"><%=news.getTel() %></th> <th class = "func"><form action = ""><input value = "<%=news.getTel() %>" type = "hidden"><input class="op" type = "submit" value ="进入账套"></form></th> <th class = "func"><form action = ""><input value = "<%=news.getTel() %>" type = "hidden"><input class = "op" type = "submit" value ="删除账套"></form></th> </tr> <%} %> </table> <dialog id ="add_account"> <form action = "" > <h1 class = "add_tit">添加账套</h1><br> <h1 class = "t1">单位名称</h1><input type = "text" class = "information" name = "name"><br> <h1 class = "t1">纳税人识别号</h1><input type = "text" class = "information" name = "id"><br> <h1 class = "t1">行业</h1><input type = "text" class = "information" name = "industry"><br> <h1 class = "t1">增值税种类</h1><select class = "select" name = "type"><option>小规模纳税人</option><option>一般纳税人</option></select><br> <h1 class = "t1">审核凭证</h1><select class = "select" name = "check"><option>审核</option><option>审核</option></select><br> <input type = "submit" value = "新增账套"> <input type = "button" value = "清空" id = "clear"> <input type = "button" value = "返回" onclick = "add_account.close()"> </form> </dialog> <script> document.getElementById("clear").addEventListener("click", function () { var inputs = document.getElementsByClassName("information"); for (let i = 0; i < inputs.length; i++) { inputs[i].value = ""; // 文本框清空 } let selects = document.getElementsByTagName('select'); for(let j=0;j<selects.length ;j++){ selects[j].selectedIndex =0; // 恢复下拉列表至初始状态 } }); </script> </body> </html>```为什么遮罩出现后原本应该出现的弹窗也没了
03-15
``` <%@ page language="java" import = "java.util.*" import ="javax.swing.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" href="../style/head_page.css"> <link rel="stylesheet" href="../style/main_function.css"> </head> <body> <div> <input type="button" class = "setting" value = "设置" id = "setting" onclick = "set.show()"> <select name = "gender" class = "account"> <option>一<% /*session.setAttribute("name",1); Window.localStorage.setItem("test", 1); window.localStorage.getItem("name");*/ %></option > <% //查询数据库的账套 %> <option> 二 </option> <option>三</option> <option>保密</option> </select> <input type = "button" id = "exit" class = "exit" value = "退出"> </div> <div id="overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:99;"></div> <div class = "main_function"> <input type = "button" value = "查看凭证" onclick = javascript:jump() class = "certificate" > </div> <dialog id = "set" class = "all_set" style = "z-index : 100"> <input type = "button" class = "close" onclick = "set.close()" value = "返回"> <form action = "account_set.jsp"> <input type = "submit" id = "account_set" class = "set1" value = "账套设置>" ></form> <br> <form action = "information.jsp"> <input type = "submit" id = "self_information" class = "set2" value = "个人信息>" ></form> </dialog> <script> const overlay = document.getElementById('overlay'); // 遮罩层 const addAccountDialog = document.getElementById('set'); // 对话框 // 打开弹窗的同时显示遮罩 function showOverlayAndDialog() { overlay.style.display = 'block'; // 显示遮罩 addAccountDialog.showModal(); // 显示弹窗 } // 关闭弹窗的同时隐藏遮罩 function hideOverlayAndDialog() { overlay.style.display = 'none'; // 隐藏遮罩 addAccountDialog.close(); // 关闭弹窗 } // 绑定按钮事件 document.querySelector('.setting').addEventListener('click', showOverlayAndDialog); // 点击“返回”按钮关闭弹窗并隐藏遮罩 document.querySelector('#set input[value="返回"]').addEventListener('click', hideOverlayAndDialog); // 如果用户点击了遮罩区域,则自动关闭弹窗及遮罩 overlay.addEventListener('click', hideOverlayAndDialog); function : jump_certificate() { window.location.href="certificate.jsp"; } </script> </body> </html>```为什么点击查看凭证后会跳转到相应页面
03-16
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值