昆明app网站开发公司,电子商务网站建设实训报告,常州seo第一人,免费编程网站说明#xff1a;该文属于 大前端全栈架构白宝书专栏#xff0c;目前阶段免费#xff0c;如需要项目实战或者是体系化资源#xff0c;文末名片加V#xff01;作者#xff1a;不渴望力量的哈士奇(哈哥)#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作#xf… 说明该文属于 大前端全栈架构白宝书专栏目前阶段免费如需要项目实战或者是体系化资源文末名片加V作者不渴望力量的哈士奇(哈哥)十余年工作经验, 从事过全栈研发、产品经理等工作目前在公司担任研发部门CTO。荣誉2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。 白宝书系列 启示录 - 攻城狮的自我修养 Python全栈白宝书 ChatGPT实践指南白宝书 产品思维训练白宝书 全域运营实战白宝书 大前端全栈架构白宝书 文章目录 ⭐事件对象的方法e.preventDefault()方法e.stopPropagation()方法 ⭐事件对象的方法
e.preventDefault()方法 e.preventDefault()方法用来阻止事件产生的“默认动作”一些特殊的业务需求需要阻止事件的“默认动作” 例如现在有一个需求制作一个文本框只能让用户在其中输入小写字母和数字其他字符输入没有效果。示例代码
bodyp只能输入小写字母和数字input typetext idfield1/pscriptvar oField1 document.getElementById(field1);oField1.onkeypress function (e) {//判断输入的不是小写字母(97~122)或数字(48~57)if (!((e.charCode 97 e.charCode 122) || (e.charCode 48 e.charCode 57))) {e.preventDefault(); //阻止浏览器的默认行为};};/script
/body再来做一个在实际工作中经常会遇到的问题想让鼠标滚轮在一个文本框中滚动来增加/减少数值同时在文本框中滚动时不要触发整个浏览器窗口的滚动。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody {height: 2000px;}/style
/head
bodyinput typetext nameheight value0 idfield1scriptvar oField1 document.getElementById(field1);oField1.onmousewheel function (e) {//鼠标在文本框中滚动时浏览器窗口页面不要滚动e.preventDefault();//滚动鼠标滚轮增加/减少文本框中的值if(e.deltaY 0) {oField1.value;}else {oField1.value--;};};/script
/body
/htmle.stopPropagation()方法 e.stopPropagation()方法用来阻止事件继续传播。事件传播阶段有捕获阶段和冒泡阶段此方法可以阻止这两个阶段的传播。 在一些场合非常有必要切断事件继续传播否则会造成页面特效显示出BUG 示例代码
bodydiv idboxbutton idstart开始按钮/button/divscriptvar oBox document.getElementById(box);var oStart document.getElementById(start);oStart.onclick function (e) {e.stopPropagation(); //阻止事件传播console.log(我是按钮);};oBox.onclick function (e) {console.log(我是盒子);};/script
/body下面做一个实际工作中经常遇到的问题案例制作一个弹出层点击按钮显示弹出层点击网页任意地方弹出层关闭。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#modal {width: 400px;height: 140px;background-color: #ccc;position: absolute;top: 50%;left: 50%;margin-top: -70px;margin-left: -200px;display: none;}/style
/head
bodybutton idsubmit提交/buttondiv idmodal/divscriptvar oSubmit document.getElementById(submit);var oModal document.getElementById(modal);//点击按钮的时候弹出层显示oSubmit.onclick function (e) {e.stopPropagation(); //阻止事件传播点击按钮时不要触发document.onclick事件否则弹出层不显示弹出的瞬间会被隐藏oModal.style.display block;};//点击其他区域时弹出层关闭document.onclick function (e) {oModal.style.display none; //隐藏弹出层};//点击弹出层区域时不要关掉弹出层oModal.onclick function (e) {e.stopPropagation(); //阻止事件传播oModal.style.display block;}/script
/body
/html
