今天遇到了一个很奇怪的问题:在ios手机上,如果页面出现滚动条,点击select元素的时候,偶尔会出现 “ 页面上的某一个输入框自动获得焦点 “ 的问题。

这个问题困扰我好久,一直找不到答案,今天终于有点头绪。

  • 问题重现的前提:

    1:页面有selec标签

    2:有input标签

    3:y轴有滚动条

  • 问题的原因是:

    点击select,触发touchstart事件,页面的滚动条会往顶部滚,事件进行冒泡

    滚动完成后,点击的位置就是输入框所在的位置,

    之后,由于事件冒泡,触发父元素的click事件,

    之后输入框获得焦点

  

  • 解决方案:

    给select元素绑定touchstart事件,在事件里面阻止事件冒泡

    $(‘select’).on('touchstart',function(e){
      e.stopPropagation();
    });

ios上【点击select元素,输入框自动获得焦点的问题】的更多相关文章

  1. 关于ionic2在IOS上点击延迟的问题

    正常的点击事件, 不知道 为什么 ,在IOS上明显会延迟几百毫秒.. 加上tappable属性就可以解决了 <div tappable (click)="doClick()" ...

  2. 记录下hbuilder vue项目打包APP 在IOS上点击延迟的问题

    做的项目打包成APP在IOS 上有延迟问题,在安卓下却不会,联想到之前 用IONIC时打包的APP也是 在IOS下有300毫秒延迟问题.所以 只能 认吧. 安装fastclick 插件: npm in ...

  3. Vue在点击内部元素时(获得焦点),怎样让外部div元素样式变化?

    问题: div内部有很多元素,div. p. span .input等,各元素有嵌套,现在点击某元素时需要最外面这个div边框高亮,例如,点击了input开始输入 假设html 结构如下  <d ...

  4. 内嵌iframe页面在IOS下会受内部元素影响自动撑开的问题

    IOS下的webview页面,内嵌iframe元素,将其样式指定为宽高100%: .iframe { width: %; height: %; } 在安卓下运行均无问题,但是在IOS下会出现异常. 具 ...

  5. Jquery 在ios上事件委托失效

    点击通过js遍历出来的列表,跳转页面.点击事件委托在document上, 像这样: $(document).on("click",".nav",function ...

  6. ios上有时候提交按钮点击两次才可以取消输入框软键盘

    ios上有时候提交按钮点击两次才可以取消输入框软键盘,点击第一次软键盘消失,点击第二次输入框页面消失,这样用户体验不好.我的做法是用 touchstart 代替click来处理 反应快,但是有时候会出 ...

  7. 【转】iOS 上常用的两个功能:点击屏幕和return退出隐藏键盘和解决虚拟键盘挡住UITextField的方法

    iOS上面对键盘的处理很不人性化,所以这些功能都需要自己来实现, 首先是点击return和屏幕隐藏键盘 这个首先引用双子座的博客 http://my.oschina.net/plumsoft/blog ...

  8. 仅Firefox中A元素包含Select时点击Select不能选择option

    这是在使用京东的一个日期组件时碰到的bug,重现bug的代码精简如下 <!DOCTYPE HTML> <html> <head> <title> 仅Fi ...

  9. jQuery自动完成点击html元素

    /************************************************************************** * jQuery自动完成点击html元素 * 声 ...

随机推荐

  1. django 基础框架学习 (三)

    Django框架基础-03数据库新增数据    1.save⽅法        >>> from datetime import date        >>> f ...

  2. P4213 【模板】杜教筛(Sum)

    \(\color{#0066ff}{题 目 描 述}\) 给定一个正整数\(N(N\le2^{31}-1)\) 求 \(\begin{aligned} ans_1=\sum_{i=1}^n\varph ...

  3. SprimgMVC学习笔记(九)—— RESTful支持

    一.什么是restful? Restful就是一个资源定位及资源操作的风格,其核心是面向资源.不是标准也不是协议,只是一种风格.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制.RES ...

  4. php 伪造HTTP_REFERER页面URL来源的三种方法

    php获取当前页面的前一个页面URL地址,即当前页面是从哪个页面链接过来的,可以使用$_SERVER['HTTP_REFERER']; 但是$_SERVER['HTTP_REFERER']也是可以被伪 ...

  5. C#是类型安全语言

    C#是一种类型安全语言:所有的表达式都解析成某个类型的一个实例,在编译器生成的代码中,只会执行对这个类型来说有效的操作. [优势] 许多错误能在编译时就检测到,确保代码在执行这段代码前是正确的: 生成 ...

  6. Linux 网络配置及常用服务配置(Redhat 6)

    一.网络配置 1. VMWare 提供了三种网络工作模式供用户选择,他们分别是, ①Bridged(桥接模式): 如果网络中能提供多个IP地址,则使用桥接方式 ②NAT(网络地址转换模式): 如果网络 ...

  7. asp.net AD 域验证

    1.获取环境变量 string strAuthUser = request.ServerVariables["AUTH_USER"] 以上这行代码是用来获取当前用户的登录名 2.I ...

  8. Outlook 2010中263邮箱客户端设置

    Outlook 2010中263邮箱客户端设置 1.首次添加电子邮箱账户:打开outlook,在账户设置和服务中分别选择:“手动配置服务器设置或其他服务器类型”,“Internet电子邮件” 2.在i ...

  9. 问题解决Determine IP information for eth0.. no link present check cable

    网上方法都没有解决:简单粗暴编辑里还原了默认设置OK了 网上方法1 一般解决办法: 第一步: 到/etc/sysconfig/network-scripts/ifcfg-eth<n>/et ...

  10. linux面试题:删除一个目录下的所有文件,但保留一个指定文件

    面试题:删除一个目录下的所有文件,但保留一个指定文件 解答: 假设这个目录是/xx/,里面有file1,file2,file3..file10 十个文件 [root@oldboy xx]# touch ...