今天遇到了一个很奇怪的问题:在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. C语言数据结构-单链表的实现-初始化、销毁、长度、查找、前驱、后继、插入、删除、显示操作

    1.数据结构-单链表的实现-C语言 typedef struct LNode { int data; struct LNode* next; } LNode,*LinkList; //这两者等价.Li ...

  2. java.sql.Date/ java.util.Date/ java.util.Calendar 用法与区别

    在 JDK API  这样解释," 在 JDK 1.1 之前,类 Date 有两个其他的函数.它允许把日期解释为年.月.日.小时.分钟和秒值.它也允许格式化和解析日期字符串.不过,这些函数的 ...

  3. swift -- 单例+ lazy懒加载 + 第三方库

    //工具类单例 static let goods : NHGoods = { let good = NHGoods() return good }() //懒加载 lazy var registerB ...

  4. git push fatal: HttpRequestException encountered

    原因: github禁用了TLS1.0/1.1协议 截至2018年2月22日,GitHub禁用了对弱加密的支持,这意味着许多用户会突然发现自己无法使用Git for Windows进行身份验证(影响版 ...

  5. CF .Beautiful numbers 区间有多少个数字是可以被它的每一位非零位整除。(数位DP)

    题意:数字满足的条件是该数字可以被它的每一位非零位整除. 分析:大概的思路我是可以想到的 , 但没有想到原来可以这样极限的化简 , 在数位dp 的道路上还很长呀 : 我们都知道数位dp 的套路 , 核 ...

  6. C语言变参函数的实现原理

    1. 变参函数简单示例 #include <stdarg.h> #include <stdio.h> int Accumlate(int nr, ...) { ; ; va_l ...

  7. Linux下Java环境安装配置记录

    下载jdk http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 两种安装方式: 第一 ...

  8. hadoop用put上传文件时报错

    用命令-put上传文件 报错0 datanode(s) running 原因是进行了多次格式化 解决办法: 停止集群 删除在hdfs中配置的data目录(即在core-site.xml中配置的hado ...

  9. 德国生活tips

    提要: 在德国生活也近7个月的时间了,简单给准备来德国留学,生活或者是旅游的人写一些小tips.想到什么就写什么咯. (1)德国交通篇 在德国,交通是第一要点,一般大家都会看到城市里有Straßenb ...

  10. 研磨设计模式学习笔记4--单例模式Signleton

    需求:加载配置文件,由于配置文件全局唯一,所以不用过多对象,建一个就可以了. 优点:单例模式本质就是为了控制实例数目. 一.饿汉式 public class Singleton { private S ...