2022-03-12 工作记录--HTML-解决点击button出现页面抖动问题

最新推荐文章于 2023-07-18 18:59:15 发布
最新推荐文章于 2023-07-18 18:59:15 发布
阅读量609 收藏 2
点赞数 5
分类专栏： 工作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48850734/article/details/123480825
版权

button类型 submit 抖动问题 校区选择 用户体验优化
关键词由CSDN通过智能技术生成

一、问题分析

  1. 在点击提交后，我对校区选择进行了判断：若为空，则进行提示。但是见下图，点击提交后，提示快速消失；
  2. 提示快速消失后，选择的校区也自动消失了，页面自动初始化了。
    在这里插入图片描述

二、问题解决

我们这儿的提交用的是button标签，而button标签的默认type是submit（见下图）：点击一次这个按钮，就会提交一次，所以就出现上述的页面抖动效果。
见下图
在这里插入图片描述
在这里插入图片描述
So

我们要自己给button标签写一个type，我在这儿给的是button（见下图）
在这里插入图片描述

三、最终效果

在这里插入图片描述

小呀小萝卜儿
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js 特效 html 特效 鼠标抖动的按钮
08-25
js 特效 html 特效 鼠标抖动的按钮 js 特效 html 特效 鼠标抖动的按钮
ChatGPT 导出工具 - 轻松提取聊天记录-1.6.0.zip
最新发布
12-27
名称：ChatGPT 导出工具 - 轻松提取聊天记录 ---------------------------------------- 版本：1.6.0 作者：Dwt 分类：其他 ---------------------------------------- 概述：ChatGPT Exporter是一款多功能的工具，...
CSS 控制Html页面高度导致抖动问题的原因
weixin_30300523的博客
10-12 655
CSS 控制Html页面高度导致抖动，这类由高度导致页面抖动的问题，其实究其根本原因是滚动条是否显示导致的 在CSS中添加如下代码： html,body{ overflow-y:scroll;}html,body{ overflow:scroll; min-height:101%;}html{ overflow:-moz-scrollbars-vertical;} 已经试验过了...
js高阶函数 函数的节流丶防抖 以及封装方法
m0_62816172的博客
12-04 312
函数节流节流及防抖的介绍： 函数节流：当一个函数在大于等于某个周期时间才执行，如果在周期内是不执行的。 函数防抖：短时间内多次触发一个事件，只执行最后一次，或者执行最开始的一次，当在等待时间内再次触发事件时重新开始计时。 节流的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" .
Button 按钮：防连点，节流防抖
sunluyi的博客
11-08 1704
功能描述 提交接口，点击按钮时，需要做防连点处理， 参数 data() { return { loading:false, // （Boolean）：按钮名称前是否带 loading 图标，为true时，不能点击。 throttleTime:1000, // （String | Number）：节流的时间间隔(一定时间内无论点击多少次，只会触发一次click事件)，单位ms， } }, 完整代码 <template> <view class="index"&gt.
【前端】html+css实现鼠标悬浮变色的按钮，消除加粗边框发生抖动现象的两种方法 hover【HTML+CSS+JavaScript(JS)】
cc2855816075的博客
02-11 2629
效果： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>zuoye4</title> <style type="text/css"> div{ display: inline-block; margin: 5px 10px; } input:hover{ border-color: #FF
discourse-new-topic-button-theme-component
05-15
本文将深入探讨如何创建一个名为"discourse-new-topic-button-theme-component"的主题组件，它允许在论坛的每个页面上添加一个醒目的“新主题”按钮。这个组件基于HTML和CSS，旨在提供一种简洁而有效的方式，让用户...
react-native-flat-button:扁平按钮组件，用于本机
05-18
react-native-flat-button 扁平按钮组件，用于本机 安装 npm i react-native-flat-button --save 原料药 Struts 类型 默认 描述 type string （必填） -- 按钮的类型。 使用预定义的类型： 'primary' ， '...
voices-button-cli:语音按钮CLI工具
03-17
语音按钮控制台工具安装＆使用方法npm i voices-button-cli -g# yarn global add voices-button-clibutton create <项目名>项目模板
highlightjs-copy-button.js:Highlight.js https的复制按钮插件
05-15
highlightjs-copy-button.js Highlight.js复制按钮插件。 用法 下载插件并在highlight.js之后包含文件： < script src =" path/to/highlight.min.js " > </ script > < script src =" path/to/...
js 特效 html 特效 按钮震动页面
06-13
js 特效 html 特效 按钮震动页面
html页面一直抖动，晃动的解决办法
热门推荐
qq_17451827的博客
11-13 2万+
如果页面一直在晃，就是css的问题，网上查了一下有两种方法。 第一种是： html,body{ overflow:scroll; min-height:101%;} html{ overflow:-moz-scrollbars-vertical;} 测试了一下，的确不抖了，但是界面出现滚动条，很难看。所以不建议使用。 第二种是： html, body {height:100%;ove...
html页面抖动，晃动的解决办法
yhj198927的博客
08-27 3768
如果页面一直在晃或者点击页面某一部分时晃动一下，就是css的问题，解决方法如下： //第一种 html,body{ overflow-y:scroll;} //第二种 html,body{ overflow:scroll; min-height:101%;} //第三种 html{ overflow:-moz-scrollbars-vertical;} ...
HTML5页面点击按钮显示闪烁或黑色背景
csdnzhaoxiaosheng的博客
04-11 539
H5页面在IOS端测试的时候发现，点击按钮会闪动，出现一个黑色的背景一闪而过
前端js防抖
weixin_52236586的博客
07-18 1230
jQuery库可以更简单地实现防抖功能。jQuery提供了一个方便的方法**$.debounce()**来实现防抖。'立即触发按钮点击事件处理函数''等候触发按钮点击事件处理函数'// 在这里执行立即触发逻辑。// 在这里执行等候触发逻辑。// 创建立即触发的防抖函数。// 创建等候触发的防抖函数。'按钮点击事件处理函数'// 在这里执行你的逻辑。
抖动按钮
沫栀·的博客
07-08 398
今天我们来做一个与平常不一样的按钮，平常的按钮是静态的样式，而今天这个当我们把鼠标放上去之后按钮会按照写出来的样式进行抖动，抖动的速度还可以根据这一句代码来更改抖动的速度，this后面的数值越小，抖动的速度越快。 第一句（this，200）是以平常的速度进行抖动，而第二句的（this，100）是以更快的速度抖动，当学会这个会抖动的按钮我们可以在自己搭建完成的页面上使用，是页面更加的有趣。 以下...
Bug：Javascript调整HTML CSS引起“可怕”的页面抖动
Nnnn的博客
07-04 725
曾经浏览过某在线视频网站，发现某页面下拉后出现明显的“上下抖动”的现象。使用工具查看HTML DOM元素和源码，发现了一些端倪。 HTML变化前： 变化前 HTML变化后： 变化后 稍微检查元素后，发现是一个header标签发生改变：class属性不断循环在两个固定值之间切换。很明显，这应该是某些Javascript脚本引起的。查看网页源代码，查找该id的标签没有找到相关脚本。又逐个查阅远程javascript脚本源码。最终发现问题的关联。 相关id标签关联的javascript脚本 .
html出现滚动条页面闪动,css解决滚动条出现造成页面晃动的问题
weixin_39907157的博客
06-03 3196
窗体默认是没有滚动条的，而HTML的内容是自上而下加载，就会发生一开始没有滚动条，后来突然出现滚动条，此时页面的可用宽度发生变化，水平方向的内容会发生晃动，尤其是水平居中显示的内容，出现滚动条后会重新计算。解决方法：一、简单的做法是html {overflow-y: scroll;}当页面注定要出现滚动条的话，可以用此方法，让滚动条从一开始就显示出来，即使内容一屏能展示也会出现滚动条，这里有点不优...
css——点击按钮时页面会出现抖动
weixin_43551242的博客
03-13 2085
vue结合element el-button点击按钮时页面会闪烁出现抖动原因： .该元素设置了margin或padding或者border（这种情况会引起重排和重绘https://zhuanlan.zhihu.com/p/148825597） .解决方法：添加属性box-size：border-box css3 box-size属性允许您以特定的方式定义匹配某个区域的特定元素。 eg：假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有
解决element-plus el-button点击之后回复默认颜色问题
06-06
要解决element-plus el-button点击之后回复默认颜色的问题，你可以使用CSS伪类选择器`:not(:disabled):active`来设置按钮的活动状态样式。示例代码如下： ```css .el-button:not(:disabled):active { background-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小呀小萝卜儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值