导航wordpress模板下载,友山建站优化,网站开发需要兼容到ie几,网页设计能干什么问题详情
在嵌入式硬件设备里#xff0c;测试 “点击input密码框#xff0c;弹出第三方自带键盘#xff0c;点击密码框旁的小眼睛#xff0c;切换输入内容加密状态#xff0c;键盘收起/弹出状态不变” 的功能逻辑#xff1b;实际情况却是 “点击键盘或input框之外的任何地…问题详情
在嵌入式硬件设备里测试 “点击input密码框弹出第三方自带键盘点击密码框旁的小眼睛切换输入内容加密状态键盘收起/弹出状态不变” 的功能逻辑实际情况却是 “点击键盘或input框之外的任何地方键盘都会收起” 。div classw-440 h-90 items-centertext classfs-24 fw-500 mr-20密码/textinput idinput type{{type}} value{{inputvalue}} classw-232 h-90 fs-24 bg-cardBg items-center input-stylestylekeyboard: {{ keyboardStyle }}; width: {{ inputwidth }}px; placeholder{{placeholder}}onclickhandleClick //divdiv onclickchangeType classw-98 h-90 absolute styletop: -2px; right: -2px;image if{{showPassword}} src{{/common/images/eye.png}} classabsolute top-25 right-24 w-41 h-41/imageimage else src{{/common/images/eye-close.png}} classabsolute top-25 right-24 w-41 h-41/image/div/////changeType(event) {this.showPassword !this.showPassword;event.stopPropagation(); // 阻止冒泡},页面编写基于Vela JS框架
问题分析
由于是第三方键盘暂时看不到其底层处理方式初步判断出两个逻辑一是键盘的弹出和input框的focus事件相关二是键盘弹出时会默认在整屏生成蒙层用户点击时触发蒙层绑定的交互事件判断如果是非input框范围则收起键盘大众逻辑
解决思路
思路1不去考虑第三方键盘的底层处理方式在用户点击小眼睛时强制触发input框的focus事件changeType(event) {this.showPassword !this.showPassword;if (this.focus) {this.$element(input).focus({focus: true})}event.stopPropagation(); // 阻止冒泡},结果导致点击小眼睛时键盘闪烁外加需要点击两次小眼睛才会切换小眼睛的状态就像是生成了两个蒙层点两次才能点到小眼睛看不到源代码咱也是瞎猜
思路2如果蒙层上绑定的是onclick事件大众逻辑我们可以在小眼睛上绑定一个比onclick事件更快响应的事件并在事件处理函数内阻止事件冒泡/穿透到蒙层
这里就涉及到click和touch事件的触发顺序了事件触发顺序touchstart → touchmove → touchend → click
click与touchstart触发时间差约300ms因需区分双击和单击我们虽然无法确认蒙层是位于小眼睛的上层还是下层但只要小眼睛上事件能触发我们就可以将小眼睛上绑定的事件改为最快响应的touchstart并阻止事件冒泡/穿透div ontouchstartchangeType classw-98 h-90 absolute styletop: -2px; right: -2px;.../div/// changeType(event) {this.showPassword !this.showPassword;if (this.focus) {this.$element(input).focus({focus: true})}event.stopPropagation(); // 阻止冒泡event.preventDefault(); // 阻止默认事件},问题解决了键盘不闪了小眼睛也能正常点击
但是又想到小眼睛的点击没有默认事件需要阻止就把event.preventDefault();删了测试无影响又想到event.stopPropagation();生效的前提是蒙层是小眼睛的祖先元素为了确认又把event.stopPropagation();删了发现也没有影响…
奇怪啊所以解决这个问题的关键仅仅只是将click改为了touchstart难道小眼睛的闪烁是click的300ms延迟导致的想不明白了…
结果就这么简单解决了…div ontouchstartchangeType classw-98 h-90 absolute styletop: -2px; right: -2px;.../div/// changeType(event) {this.showPassword !this.showPassword;if (this.focus) {this.$element(input).focus({focus: true})}},
