e.preventdefault()别滥用

最新推荐文章于 2024-11-29 09:34:59 发布
原创 最新推荐文章于 2024-11-29 09:34:59 发布 · 758 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#java #vue

文章探讨了在IE8中，错误地在checkbox change事件回调中使用e.preventDefault()导致复选框选中状态未能正确重绘的问题，解释了e.preventDefault()对浏览器行为的影响，并提供了解决方案。

有的时候我们会为事件回调函数添加一个参数（通常是e），并在函数中加入e.preventdefault()；以取消默认行为。由于习惯，我顺手将它写到了一个checkbox的change事件中。由于不同的浏览器解释不同，在IE8上出现了一个bug：change事件能进入，但是UI显示上不能讲复选框的选中状态重绘。

分析原因，是我的e.preventdefault()阻止了状态重绘。去掉后，就好了。

e.preventdefault()会阻止什么：

checkbox 、radio的状态变化(并非所有浏览器)。

a标签的跳转

表单的提交

君君啊�
关注
别再“滥用” useState：这些高频需求更该交给 useRef
前端开发-前端技术分享
09-25 1066
工程化视角讲清 useRef 的原理与边界，结合聚焦、计时器、前值对比、表单读取等高频场景，给出可直接复用的实战范式，显著降低不必要渲染。
jQuery中事件对象e的事件冒泡用法示例介绍
10-26
此外，`e.preventDefault()`方法用于阻止事件的默认行为，例如在一个链接上的点击默认会跳转到链接地址，通过调用`e.preventDefault()`可以阻止这一默认行为的发生。 如果在事件处理函数中返回`false`，则相当于...
e.preventDefault()
weixin_43063398的博客
11-29 683
是一个用于阻止浏览器默认行为的 JavaScript 方法。
e.preventDefault();
chenchengdexiaoxiao的博客
02-11 318
比如一个button放在一个form中，这个button的Default就是提交（submit），但如果你不想让他提交，就可以用e.preventDefault(); 打个比方： $(document).ready(function(){ $("button").click(function(e){ $("...
e.preventDefault
qq_22912891的博客
05-09 2125
有时候点击提交按钮会有一些默认事件。比如跳转到别的界面。但是如果没有通过验证的话，就不应该跳转。这时候可以通过设置event.preventDefault(); //阻止默认行为 ( 表单提交 )。 下面是案例： "text/javascript"> $(function(){ $("#sub").bind("click",function(event){
e.preventdefault()方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。...
weixin_30662011的博客
10-18 1296
语法：event.preventDefault()参数：event 必需 规定阻止哪个事件的默认动作。这个event参数来自事件绑定函数。例：a上面的url将不被打开 $("a").click(function(event){ event.preventDefault(); }); 转载于:https://www.cnblogs.com/chenxiaomei0104/p/9811...
event.preventDefault()；
xjdkxnhcoskxbco的博客
08-09 557
有些事件（如 beforeunload 事件）具有特殊的行为，当你使用 event.preventDefault() 时，浏览器可能会显示一个提示框。如果你有一个表单，而你不希望在点击提交按钮时浏览器自动提交表单，可以使用 event.preventDefault() 来阻止默认提交行为。如果你想阻止右键点击时出现默认的上下文菜单，可以使用 event.preventDefault()。当你希望点击一个链接时，阻止其跳转到新页面，可以使用 event.preventDefault()。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>账户批量生成系统</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); color: #e0e0e0; min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .card { width: 100%; max-width: 480px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); border-radius: 20px; padding: 40px 30px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.1); transition: box-shadow 0.3s ease; } .card:hover { box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35); } .title { text-align: center; font-size: 1.8em; font-weight: 600; color: #ffffff; margin: 10px 0 15px; letter-spacing: 0.8px; text-shadow: 0 0 10px rgba(130, 200, 255, 0.4); } .subtitle { text-align: center; font-size: 0.95em; color: #aaa; margin-bottom: 30px; opacity: 0.8; } .form-group { margin-bottom: 22px; } .form-control { width: 100%; padding: 14px 18px; font-size: 1em; background: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; outline: none; transition: all 0.3s ease; } .form-control::placeholder { color: rgba(255, 255, 255, 0.5); } .form-control:focus { border-color: #6a5af9; box-shadow: 0 0 0 3px rgba(106, 90, 249, 0.3); background: rgba(255, 255, 255, 0.15); } .custom-select-wrapper { position: relative; width: 100%; } .custom-select-trigger { width: 100%; padding: 14px 18px; font-size: 1em; background: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s; } .custom-select-trigger::after { content: '▼'; font-size: 0.7em; color: #ccc; } .custom-select.open .custom-select-trigger::after { transform: rotate(180deg); } .custom-options { position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px; background: #1e1e2d; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; max-height: 200px; overflow-y: auto; z-index: 10; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all 0.2s ease; } .custom-select.open .custom-options { opacity: 1; visibility: visible; transform: translateY(0); } .custom-option { padding: 12px 18px; color: #ddd; cursor: pointer; transition: background 0.2s; } .custom-option:hover, .custom-option.selected { background: #6a5af9; color: white; } .btn-submit { width: 100%; padding: 14px; background: linear-gradient(90deg, #6a5af9, #8a7eff); color: white; font-size: 1.1em; font-weight: 600; border: none; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; letter-spacing: 0.8px; box-shadow: 0 4px 15px rgba(106, 90, 249, 0.3); } .btn-submit:hover { background: linear-gradient(90deg, #5d4df8, #7a6dff); box-shadow: 0 7px 20px rgba(106, 90, 249, 0.4); } .msg-box { margin-top: 18px; padding: 12px 16px; border-radius: 10px; font-size: 0.95em; text-align: center; opacity: 0; height: 0; overflow: hidden; transition: opacity 0.4s ease; } .msg-box.show { opacity: 1; height: auto; margin-bottom: 10px; } .msg-success { background-color: rgba(76, 175, 80, 0.2); color: #8bc34a; border: 1px solid rgba(76, 175, 80, 0.3); } .msg-error { background-color: rgba(244, 67, 54, 0.2); color: #ef9a9a; border: 1px solid rgba(244, 67, 54, 0.3); } @media (max-width: 480px) { .card { padding: 30px 20px; border-radius: 16px; } .title { font-size: 1.6em; } } </style> </head> <body> <div class="card"> <h3 class="title">账户批量生成</h3> <p class="subtitle"></p> <form id="register-form" autocomplete="off" action="cdks.php" method="post"> <input type="hidden" id="type" name="type" value=""> <div class="form-group"> <input type="text" class="form-control" id="sqm" name="sqm" placeholder="请输入 GM 授权码" required> </div> <div class="form-group"> <input type="number" class="form-control" id="num" name="num" placeholder="请输入生成数量 (1-1000)" min="1" max="1000" required> </div> <div class="form-group custom-select-wrapper"> <div class="custom-select" id="customSelect"> <div class="custom-select-trigger">请选择类型</div> <div class="custom-options"> <div class="custom-option" data-value="2">账户批量生成</div> </div> </div> </div> <button type="submit" class="btn-submit">✨ 生成授权码</button> <div id="divMsg" class="msg-box"></div> </form> </div> <script> document.addEventListener('DOMContentLoaded', function () { const customSelect = document.getElementById('customSelect'); const trigger = customSelect.querySelector('.custom-select-trigger'); const options = customSelect.querySelectorAll('.custom-option'); const hiddenInput = document.getElementById('type'); const form = document.getElementById('register-form'); const msgBox = document.getElementById('divMsg'); trigger.addEventListener('click', function (e) { e.stopPropagation(); customSelect.classList.toggle('open'); }); options.forEach(option => { option.addEventListener('click', function (e) { e.stopPropagation(); trigger.textContent = this.textContent; hiddenInput.value = this.dataset.value; options.forEach(opt => opt.classList.remove('selected')); this.classList.add('selected'); customSelect.classList.remove('open'); }); }); document.addEventListener('click', function () { customSelect.classList.remove('open'); }); document.addEventListener('keydown', function (e) { if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') { e.preventDefault(); } }); form.addEventListener('submit', function (e) { e.preventDefault(); const sqm = document.getElementById('sqm').value.trim(); const num = parseInt(document.getElementById('num').value); const type = hiddenInput.value; msgBox.textContent = ''; msgBox.classList.remove('show', 'msg-success', 'msg-error'); if (!sqm) { showMsg('❌ 请填写 GM 授权码', 'error'); return; } if (!num || num < 1 || num > 1000) { showMsg('⚠️ 生成数量必须在 1 到 1000 之间', 'error'); return; } if (!type) { showMsg('⚠️ 请选择生成类型', 'error'); return; } showMsg(`✅ 正在生成 ${num} 个账户授权码...`, 'success'); }); function showMsg(text, type) { msgBox.textContent = text; msgBox.classList.add('show', type === 'success' ? 'msg-success' : 'msg-error'); } }); </script> </body> </html> 点击生成并未成功加载cdks.php内的信息生成内容
最新发布
11-10
e.preventDefault(); showMsg(`✅ 正在生成 ${num} 个账户授权码...`, 'success'); ``` 这意味着：**实际上根本没有真正请求服务器！只是模拟了一下提示信息！** 3. 所以后端 `cdks.php` 根本没被调用 → 没有...
使用window.onbeforeunload刚进入页面时显示离开页面提示如何解决
10-24
- 现代浏览器要求同时设置 `e.preventDefault()` 和 `e.returnValue`[^1][^3] - 自定义提示文本可能被浏览器忽略（显示默认提示） 2. **最佳实践** ```javascript // 正确示例：综合方案 let isEnabled = ...
浅析return false的正确使用
09-04
e.preventDefault(); var a = $(this), href = a.attr('href'), content = a.parent().next(); content.load(href + " #content"); }); }); ``` 这样，事件冒泡仍然能够发生，允许`div.post`的点击事件正常...
e.preventDefault()是什么
weixin_42610010的博客
12-31 2668
e.preventDefault() 是一个 JavaScript 函数，它可以阻止浏览器的默认行为。例如，当你点击一个超链接时，浏览器会自动跳转到超链接指向的页面，这就是浏览器的默认行为。如果你希望在点击超链接时不跳转，可以在超链接的事件处理函数中使用 e.preventDefault() 来阻止浏览器的默认行为。 例如，假设你有一个超链接： <a href="/some/page"&gt...
【JS基础】e.preventDefault() 阻止默认操作
热门推荐
Milk~每天分享一点点，技术进步一点点
08-05 3万+
阻止默认操作 默认操作 具体指的是什么呢？看如下实例： 把单击事件处理程序注册到一个锚元素，而不是一个外层的上，那么就要面对另外一个问题：当用户单击链接时，浏览器会加载一个新页面。 当用户在编辑完表单后按下回车键时，会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。这种行为与我们讨论的事件处理程序不是同一个概念，它是单击标签元素的默认操作。 在这种情况下，处理方法有： 1.w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false pre
事件对象之方法e.preventDefault()
xuehaocyuyan的博客
08-14 810
事件对象3e: e.preventDefault():阻止某些事 ——表单、鼠标滚轮 鼠标滚轮事件：onmousewheel: e.deltaY 小例子：鼠标在盒子内部滚动时页面不滚动 在这里插入代码片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&gt
关于e.preventDefault()方法
weixin_43821171的博客
09-22 8271
背景： 同事在项目中遇到的问题，在项目中导入了某一个组件作为根组件之后，发现原来的子组件中的滚动效果不再生效，因为是移动端的项目，所以这里的滚动效果是通过touchmove事件进行触发的，在对引入的组件进行研究后，发现是在根组件中阻止了touchmove事件的默认事件，也就是调用了e.preventDefault()方法，然后同事们通过阻止冒泡阻止了这个方法的调用，解决掉了因为引入组件而带来的问题，但这却引发了一连串的有关于preventDefault()这个方法的思考。 问题： 为什么我在父组件上使用pr
e.preventDefault() 和 e.stopPropagation()
beibei_niao的博客
11-12 625
阻止默认行为，例如阻止表单提交或链接跳转。：阻止事件冒泡，防止事件触发父级元素的事件处理函数。它们经常一起使用，尤其是在需要控制某个子元素的事件行为且不影响父级元素时。
JS - e.preventDefault()与e.stopPropagation()
kelly0721的博客
02-10 2546
事件冒泡 e.stopPropagation()阻止事件冒泡 事件冒泡，就是字元素的onClick事件被触发时，会同时触发父元素的 onClick 事件 一般来讲，click事件的顺序应该是p -> div -> body -> html -> document 所以，以下代码的触发顺序是 children -> parent -> body 如果 e.st...
e.preventdefault() 别滥用
weixin_30668887的博客
09-18 1201
有的时候我们会为事件回调函数添加一个参数（通常是e），并在函数中加入e.preventdefault()；以取消默认行为。由于习惯，我顺手将它写到了一个checkbox的change事件中。由于不同的浏览器解释不同，在IE8上出现了一个bug：change事件能进入，但是UI显示上不能讲复选框的选中状态重绘。 分析原因，是我的e.preventdefault()阻止了状态重绘。去掉后，就好了。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值