ios 绑定事件无效
来源:互联网 发布:比较好的程序员论坛 编辑:程序博客网 时间:2024/06/10 02:11
问题描述
当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效。
测试代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>iOS click bug test</title> <style> .container { } .target { display: block; text-align: center; margin: 100px 30px 0; padding: 10px 0; border: 1px solid #ccc; } </style></head> <body> <div class="container"> <div class="target"> Click Me! </div> </div> <script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script type="text/javascript"> // 或者 $(document).on('click', ....) $('body').on('click', '.target', function (e) { alert('click'); }); </script></body> </html>
解决办法
解决办法有 4 种可供选择:
将 click 事件直接绑定到目标元素(即 .target)上
将目标元素换成 或者 button 等可点击的元素
将 click 事件委托到非 document 或 body 的父级元素上
给目标元素加一条样式规则 cursor: pointer;
推荐后两种。从解决办法来看,推测在 safari 中,不可点击的元素的点击事件不会冒泡到父级元素。通过添加 cursor: pointer 使得元素变成了可点击的了。
扩展阅读
- Click event delegation on the iPhone
- Making Elements Clickable
阅读全文
0 0
- ios 绑定事件无效
- jquery on()绑定事件无效
- 【IOS】UITextField 绑定事件
- iOS控件绑定事件
- vue element-ui 绑定@keyup事件无效
- Juery新增节点之后事件绑定无效
- vue的键盘事件直接绑定无效?
- js绑定滚动事件,滚动事件无效,没有触发
- 关于jQuery用bind动态绑定事件无效的处理
- 关于iPhone的点击事件绑定无效的处理方法
- ButterKnife点击事件无效或控件绑定为空
- 动态生成input绑定事件无效如:blur
- jQuery绑定动态元素的点击事件无效
- ios 设置按钮背景 及绑定事件
- keyup,keydown事件在IOS上无效问题
- 绑定句柄无效
- jQuery使用on()绑定动态生成元素的事件无效的问题
- jQuery使用on()绑定动态生成元素的事件无效的问题
- 常用样式
- Android动画之帧动画
- 一种提高Android应用进程存活率新方法
- 晶闸管输出光耦合器TLP541参数及应用实例
- iOS alloc、init和new方法
- ios 绑定事件无效
- java容器之一_概述
- npm 源管理 nrm
- 关于读W3C文档的收获-html篇-a
- jQuery插件来调整表列的大小colResizable.js 拖动改变单元格宽度
- VMware中Nat方式设置静态IP
- 美团渠道打包简单粗暴快速版
- Ext.EditGrid-->beforeedit 例子
- L先生与阶乘