点击穿透bug · Jaywii】的更多相关文章

微信点击穿透Bug 问题描述:在移动端为了去除点击延迟引入了fast-click,然而在房贷计算器的开发中遇到了这样一个bug,用户点击了select之后,微信在弹出选择器之后会瞬间因为约300ms的点击穿透而立刻收起来,导致用户无法使用选择器,最初尝试在用户点击了Select之后为select下面的表单层添加pointer-events:none的CSS样式避免屏蔽点击效果,结果发现这样做只能保障穿透下去的点击事件不会点进input框导致聚焦事件发生,但是依旧无法避免弹出来的选择器收起来,初步…
穿透(点穿)是在mobile各种浏览器上发生的常见的bug.可能是由click事件的延迟(300ms)或者事件冒泡导致 现象:在A页面中有个 btn1<或a标签>,在B页面中有个 btn2,btn1和btn1都在屏幕同一个位置,两个按钮都有绑有自己的点击事件.btn1的click事件触发后跳转到B页面.当btn1被点击后跳到B页面,btn2按钮的click事件也被触发了 一般的解决方案如下: a. 使用fastclick,这个可以非常完美的解决点穿问题. b. 在touchend事件回调中加入…
大家可能都知道IE6下使用DXImageTransform.Microsoft.AlphaImageLoader滤镜(用于PNG32 Alpha透明)后链接不能点击的BUG,大家也都知道只要在a标签上加相对定位的属性(position:relative)就可以点击了. 见demo页面中的例子1:http://www.css88.com/demo/ie6bug_filter/(使用IE6查看): 非常好!但是如果在使用滤镜容器的中加上绝对定位,悲剧发生了!a标签上加相对定位的属性(position…
博客原文地址:Claiyre的个人博客 https://claiyre.github.io/ 如需转载,请在文章开头注明原文地址 移动端click事件被延迟 移动端的开发经常需要监听用户的双击行为,所以在touchend事件之后会有300ms左右的延迟,用来判断是否有双击事件. 因为这种延迟,所以我们在移动端通常不监听click事件. 移动端的事件的发生顺序是这样的:touchstart---touchmove---touchend,然后大约过300ms触发click事件 tap事件 zepto…
移动端300ms延迟:假定这么一个场景.用户在 浏览器里边点击了一个链接.由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作.因此,浏览器 就等待 300 毫秒,以判断用户是否再次点击了屏幕.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果. 点击穿透:假如页面上有两个元素A和B.B元素在A元素之上.我们在B元素的touchstart事件上注册了一个回调函数,该回…
1.background 为{x:null} 或  鼠标点击会穿透,如果不想让一个透明的border点击穿透,设置透明色Transparent时就可以点到这个看起来透明的border 2.当依赖属性IsHitTestVisible 默认为true,设置成false时, 除了1以外的情况,鼠标也能穿透.…
之前写过如何用 Qt 现成的方法写出无边框半透明的不规则窗体:<Qt 不规则窗体 – 无边框半透明> 其实有一个很特殊的窗体属性一直以来都伴随着不规则窗体出现,这就是本文要介绍的鼠标点击穿透.鼠标点击穿透被广泛应用在桌面挂件程序上,目的是为了避免鼠标对窗体进行误操作. Qt 并没有自带的方法可以实现该功能,所以需要调用系统本身的 API 来实现.这里介绍下 Windows 下和 Linux 下如何实现鼠标点击穿透. Windows API : SetWindowLong SetWindowLo…
modal 弹框遮罩层,滚动穿透bug 解决方案 parent component 动态设置 lock css const computedClassName = classNames( 'activity-detail', { // 'activity-detail-scroll-lock': true, 'activity-detail-scroll-lock': isLock, }, ); <View className={computedClassName} onTouchMove={t…
modal 遮罩层,滚动 穿透bug float 弹层 taro 小程序弹框 滚动击穿 问题 https://segmentfault.com/q/1010000011134345 solution disable scroll event handleTouchScroll = (flag = `true`) => { log(`touch scroll`) // if (ENV !== Taro.ENV_TYPE.WEB) { // return // } document.body.add…
iphone对fixed展现层中存在滚动内容支持非常不好, 尤其是背景页面产生滚动以后,输入控件就找不到了, 取消冒泡也不行,最后是这么解决的,可以参考 <style> .modeldiv{ display:none; position:absolute; z-index:1000; top:5%; left:2rem; right:2rem; height:80%; -moz-border-radius:1rem; -webkit-border-radius:1rem; border-rad…
微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都只有定死的样式和内容. 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的. 例如: 代码如下: <view class="free-btns" style="margin-top: 10vh;background:none;"> <button class="free-btn" bindtap="toggleDialog&…
当两个层重叠在一起时,使用Zepto的tap事件时,点击上面的一层时会触发下面一层的事件,特别是底层如果是input框时,必“穿透”,“google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,解决方案: 1.使用github上有一个叫做fastclick的库: 2.监听touchend事件,并在事件中使用preventDefault()阻止冒泡: 3.使用css3的pointer-events=true,pointer-e…
当两个层重叠在一起时,或是有个弹窗,使用Zepto的tap事件时,点击上面的一层时会触发下面一层的事件,特别是底层如果是input框时,必“穿 透”,“google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,所以会导致,这个还未求证. 如下图, 当点击关闭按钮,如果下面有商品a链接,则会穿透(关闭的同时,触发了链接):     现象原因: zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的…
Bug描述:使用mint-ui的picker组件时,datepicker和picker在ios的webview(bug是在Hybrid App发现的)中会出现滑动穿透的现象,导致弹层后面的页面也会滚动,这使得用户体验很不好. 方案1:由于picker组件的滚动是用touch事件 + translate实现的,所以,我们可以在picker弹层出现的时候禁止页面的默认滚动机制,picker弹层消失的时候解除禁用页面的默认滚动机制. data () { return { /*---------监听函数…
if (!IsPointerOverGameObject(Input.mousePosition)) { } public static bool IsPointerOverGameObject(Vector2 screenPosition) { //实例化点击事件 PointerEventData eventDataCurrentPosition = new PointerEventData(UnityEngine.EventSystems.EventSystem.current); //将点…
问题:开发一个App,主界面用了Activity,子页面用了Fragment.从Activity跳转到Fragment后Fragment透明,并且点击击穿到Axtivity. 分析:刚开始没有注意到点击击穿,就是把背景换成不透明的颜色,这时在点击Fragment空白处时才发现点击击穿,激活Acticity中的事件. 解决:设定Fragment的layout的touch监听,回传true,就可以防止穿透了.这时点击Fragment时,监听器返回True,表示点击已经被当前页面吸收了. Layout…
WPF的BUG!弹出框的 自定义控件里有Popup, Popup里面放一个ListBox 在ListBox中的SelectionChange事件触发关闭弹出框后,主窗体存在一定概率卡死(但点击标题又能用的BUG) 步骤一: 新建个自定义WPF控件UserControl Xaml代码: <UserControl x:Class="WpfApplication1.UserControl1" xmlns="http://schemas.microsoft.com/winfx/…
实现一个不规则窗体 这里我们实现一个圆形窗体,实现其他形状的窗体与这个方法类似. 首先,把窗口的高度(height)和宽度(width)值修改为相同的值,使窗口成为一个正方形. 其次,把窗口的透明属性(transparent)设置为true,这样设置之后窗口还是正方形的,但只要我们控制好内容区域的Dom元素的形状,就可以让窗口看起来像一个不规则形状一样. 不规则窗口往往需要自定义边框和标题栏,所以frame也设置为false. 另外,透明的窗口不可调整大小.所以将resizable属性设置为fa…
最近在一个项目中使用了iScroll4模拟滚动效果,调试过程中发现一个表单页中的所有表单项都无法点击聚焦, 如<select>.<input>.<textarea>.这是因为iScroll要监听整个页面事件,为了达到 最优效果,它默认禁用了所有元素的默认事件(但也有例外,如<a>默认事件不受影响),所以才造成这些表单元素点击没有反应,无法正常聚焦. 我们打开 iscroll.js ,找到这一行: onBeforeScrollStart : function(…
在ios下的浏览器中当点击当前页的一个按钮,用window.location.href进行跳转时,如果下一个页面里这点击按钮的位置是一个textarea或者text等那么他会触发focus事件,会出现ios自带的输入框 要防止这个问题的出现需要站在点击前一页时使用preventDefault()阻止默认时间就可以解决了!…
找到umeditor.js 大约在9342行,show 函数中,在方法开始部分加入: if(me.root().data().edui$mergeObj.hasClass("edui-disabled")){ return false;}…
http://www.52delphi.com/list.asp?ID=1405 CM_HITTEST是Delphi自定义的控件消息…
解决办法:mask =true wx.showLoading({ title: '正在上传...', mask:true, })…
/** * A Picker field that contains a tree panel on its popup, enabling selection of tree nodes. * 动态绑定store,修复火狐点击穿透bug * 水平有限,可能有新坑 */ Ext.define('ux.form.field.TreePicker', { extend: 'Ext.form.field.Picker', xtype: 'uxTreepicker', mixins: ['Ext.uti…
在运用angular开发移动端的应用时,发现它并没有将ng-click做兼容,在移动端使用ng-click事件仍然会有300ms延迟.后来发现angular有一个专门针对移动端的模块:angular-touch.js,其中对ng-click做了兼容性处理,以下为该模块中部分内容: /** * @ngdoc method * @name $touchProvider#ngClickOverrideEnabled * * @param {boolean=} enabled update the ng…
IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 普通IE css bug bug名称 影响版本 描述 Image Label Focus Bug IE8,IE7,IE6 <img>元素在<label>元素之内,单击时,焦点不会转移到相应的表单控件 按钮Margin-A…
本来不想弄这个ie的bug的,真的很想让它快点死掉,可是事与愿违啊,没办法,还是贴出来,以备自用. 这个网页(http://haslayout.net/css/index)上例举了所有的IE和CSS相关的BUG.如果你在开发网页的时候,你需要看看. 目前,这个网站上包含了 28 个“普通的Bug” , 4 个“布局方面的Bug” ,6 个“可以绕开的Bug” 以及 1 个“IE崩溃的Bug”,所有的这些Bug有39个指南和48个解决方法.这个列表目前更新到 2009年8月11日,19:50:22…
[今天做在移动端的一些效果时,我选择使用动画而不是用过渡,这个300ms的点击延迟是我为什么使用动画而不使用过渡最主要的一个原因] 动画和过渡 共同点:都是css控制DOM运动, 不同点: 1.过渡:只有两个关键帧,开始和结束: 2.动画可以设置多个关键帧 3.过渡必须通过事件去触发 4.动画不需要打开即可运动 [CSS执行速度更快,js事件触发执行,手机端点击类事件则会遇上300ms点击延迟,用户体验更差] 一.移动端300ms点击延迟 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击…
Qt 不规则窗体 – 鼠标点击穿透 qt实现鼠标穿透,如果要被穿透窗口只有一层,也即没有嵌套窗口,直接只用对子窗口使用setAttribute (Qt::WA_TransparentForMouseEvents,true);就ok,意味着鼠标事件让父窗口响应. 如果要穿透的窗口含有嵌套窗口,那么接着往下看 快速使用 /////////////////////////////////////////////////////////////// #ifdef Q_OS_LINUX  XShapeCo…