iOS Safari 中click点击事件失效的解决办法

问题起因:

在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行)

问题描述

当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 divspan 等),此时 click 事件会失效。

解决办法

解决办法有 4 种可供选择:

  1. ?将 click 事件直接绑定到目标?元素(??即 .target)上
  2. 将目标?元素换成 <a> 或者 button 等可点击的?元素
  3. ?将 click 事件委托到?????非 document 或 body 的??父级元素上
  4. ?给?目标元素加一条样式规则 cursor: pointer;

?推荐后两种。从解决办法来看,?推测在 safari 中,不可点击的元素的点击事件不会冒泡到父级元素。通过添加 cursor: pointer 使得元素变成了可点击的了。

引用:https://happycoder.net/solve-ios-safari-click-event-bug/

时间: 2024-08-08 15:42:07

iOS Safari 中click点击事件失效的解决办法的相关文章

[转]iOS Safari 中click点击事件失效的解决办法

iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. 解决办法 解决办法有 4 种可供选择: ?将 click 事件直接绑定到目标?元素(??即 .target)上 将目标?元素换成 

iOS Safari 中点击事件失效的解决办法

问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. 可以使用下面的代码在 iOS 中进行测试. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content=&qu

android中listview点击事件失效的灵异事件

首先说明一下我想实现的功能: 点击某个item之后,让其颜色发生变化.如果变化网上有很多例子,我就不班门弄斧了.Listview之所以点击没有反应是因为上图中绿色部分(自己定义的一个继承BaseAdapter的adapter来适应listview)将listview的item覆盖了.现在点击的只是自定义的adapter中的convertView. 其次,自定义的adapter中包含一个ImageView和二个TextView.代码如下: <?xml version="1.0" e

vue中router-link的click事件失效的解决办法

title: vue中router-link的click事件失效的解决办法 toc: false date: 2018-12-04 16:28:49 categories: Web tags: vue 使用@click.native 问题原因: router-link会阻止click事件 .native指直接监听一个原生事件 原文地址:https://www.cnblogs.com/zmj97/p/10180674.html

ios移动端浏览器点击事件失效的解决方案

点击事件失效的原因可能是因为,你用了事件代理了, 比如这样 $(document).on("click",".fd",function(){ }) 这段代码在安卓机上是没有问题的,但是iso的自带浏览器和微信浏览器和其他浏览器都会失效,原因是ios规定,事件代理的元素只能是button元素其他一律不生效 想要解决这个问题,也很简单 1. $(document).on("click","button",function(){ }

[转]android中listview点击事件失效

首先说明一下我想实现的功能: 点击某个item之后,让其颜色发生变化.如果变化网上有很多例子,我就不班门弄斧了.Listview之所以点击没有反应是因为上图中绿色部分(自己定义的一个继承BaseAdapter的adapter来适应listview)将listview的item覆盖了.现在点击的只是自定义的adapter中的convertView. 其次,自定义的adapter中包含一个ImageView和二个TextView.代码如下: <?xml version="1.0" e

vue中使用轮播图插件carousel,克隆的图片点击事件无效的解决办法

1 <div class="students-box" @click="clickSwiper"> 2 // 将点击事件绑定在父元素上 3 <carousel 4 :items="5" 5 :autoplay="true" 6 :nav="true" 7 :margin="20" 8 :loop="true" 9 :autoplayTimeout=&

关于苹果手机点击事件无效的解决办法

最近在开发一个公众号,有一个点击事件,在安卓手机上可以使用,但是放在苹果手机上就不行了,而且有两个页面都有这个点击事件,第一个页面在苹果手机上可以正常使用,第二个页面就不行,第一个页面使用的是 $('选择器').click(function(){}) 第二个页面使用的是事件委托 $('选择器').on('click','选择器',unction(){}) 看网上的回答是给事件源添加  cursor:pointer  ,但是还是不行,最后我把click事件换成了touchstart 事件就可以了,

iOS 8中CLLocationManager及MKMapView showUserLocation失败的解决办法

用XCode 6编译的原来XCode 5.1.1写的程序时,发现原来写的CLLocationManager定位的代码以及MKmapView的showUserLocation失效.查了一下,XCode 6选用iOS 8 SDK编译app的话,需要调用CLLocationManage 的requestAlwaysAuthorization 方法. 操作步骤如下: 1. 在AppDelegate的didFinishLaunchingWithOptions:方法中 [self.window makeKe