今天遇到了一个很奇怪的问题:在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. UncategorizedSQLException Mybatis中jdbcType的作用

    使用MyBatis框架做更新操作时,在该字段需要更新的内容为空时,就会出现1111错误,也就是无效的列类型,这个时候你就要使用jdbcType.至于什么时候要使用到javaType我还没遇到过,而且我 ...

  2. 一些意想不到的小bug。

    一,当if的时候,很容易忘记相对的else,从而出现bug,要将背面消息考虑全面. 二,多个元素在同一行布局的时候,要考虑文字的换行还是省略号代替. 例如:左边一个文字,宽度不固定,右边一个图形,宽度 ...

  3. CSS(十三).高度如何铺满全屏

    该需求来源一次面试题. IE6不认识!important声明,IE7.IE8.Firefox.Chrome等浏览器认识:而在怪异模式中,IE6/7/8都不认识!important声明,这只是区别的一种 ...

  4. Python字符串拼接、格式化输出、深浅复制

    1.Python字符串拼接:方法挺多.挺好用的.灵活使用可使代码简洁.可读性好. #1.用4种方法,将列表li = ['I','python','like'], #里面的单词拼成: I**like** ...

  5. HttpServletResponse 解决中文乱码

    response.setHeader("Content-type", "text/html;charset=UTF-8"); response.setChara ...

  6. window 系统 修改服务器远程登录端口

    window 系统 [ 默认3389远程端口 ] 快捷键:Ctrl+R  然后输入“regedit”,打开注册表 或者 单击左下角[开始]——[运行],然后在输入框输入 regedit,点击确定,打开 ...

  7. 数位dp 简单入门

    推荐博客 推荐博客 数位dp是一种计数用的dp,一般就是要统计一个区间[le,ri]内满足一些条件数的个数.所谓数位dp,字面意思就是在数位上进行dp咯.数位还算是比较好听的名字,数位的含义:一个数有 ...

  8. django ORM 连表查询2

    set() 更新model对象的关联对象 book_obj=models.Book.objects.first() book_obj.authors.set([2,3]) 把book_obj这个对象重 ...

  9. SyntaxError: (unicode error) 'unicodeescape' codec can't decode bytes in position 2-3: truncated \UXXXXXXXX escape错误原因及解决方法

    用Python打开文件: with open('C:\Users\PINPIN\test\file1.txt','r') as f2: pass 运行后直接就报错了: File "<i ...

  10. Java升级替换java version "1.5.0"

    首先进行java安装 http://www.cnblogs.com/someone9/p/8670585.html 2. 然后查看版本信息,仍然是1.5.0 [root@OKC java]# java ...