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

转载自：https://www.cnblogs.com/Steping/p/5737547.html

问题起因：

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

问题描述

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

解决办法

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

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

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

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

转载于:https://www.cnblogs.com/yanqin/p/7877926.html

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

使用vue-seamless-scroll自动滚动插件复制出来的数据点击事件无效的解决办法
引言:做可视化地图项目,使用vue-seamless-scroll实现表格数据自动滚动,有个bug就是复制出来的数据点击事件失效.这个插件底层的实现是cope的形式, 无限滚动原理:无限滚动的原理就是 ...
使用JavaScript动态添加HTML语句后，事件失效的解决办法
一.问题分析当我们使用js语法向页面中添加html语句时,经常会出现添加的html语句中绑定的事件无法执行,这是因为当js,css加载后才添加的html语句,这样在js事件加载时去找绑定的选择器(i ...
Uniapp 微信小程序@click点击事件失效
除了添加@click.native.stop.prevent之类的方法,还有可能有一个错误. 我在一个页面上做了一个遮罩层,遮罩层上面绑定了点击事件,有一些能被点击,但是有一些还是失效了. 因为遮罩层 ...
JavaScript_input框中失去焦点事件和点击事件冲突的解决办法
前言: 在开发的过程中,我们经常会有搜索的需求,其中就涉及到的知识点就包括了今天我们要说的两个重要"角色",input框和展示列表的li. 需求: 当我们在input框中输 ...
ListView的长按事件和点击事件冲突的解决办法
需求是这样的:listView中点击item 跳转到一个activity,长按item可以对这条item进行删除操作,在删除前会弹出dialog(确认删除对话框). 但是在开发过程中发现,当长按某个i ...
关于苹果手机点击事件无效的解决办法
最近在开发一个公众号,有一个点击事件,在安卓手机上可以使用,但是放在苹果手机上就不行了,而且有两个页面都有这个点击事件,第一个页面在苹果手机上可以正常使用,第二个页面就不行,第一个页面使用的是 $(' ...
苹果手机点击事件无效的解决办法
苹果手机兼容性问题: 除button标签外绑定点击事件无效: 在标签中加入样式: cursor:pointer;即可
jquery点击事件无效及解决办法
先放完整代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
Vue 使用v-html 动态加载代码点击事件不管用解决办法
最近做一个项目,由于数据展示受限制,只能动态拼接代码,但是发现一个问题,在标签上写的@click="xxx()" 不管用,最后专业前端朋友与之解决,话不多说,看解决办法,相信你那么 ...