IOS下的 click 点击失效
当委托给一个元素添加click事件时,如果事件是委托到 document
或 body
上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效。
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="robots" content="index,follow"/>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telphone=no, email=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="320">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<meta name="msapplication-tap-highlight" content="no">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
</head>
<body>
<div class="container"></div>
<div class="target">点击我!</div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script>
$(function () {
// $(document).on('click', '.target', function () {})
$('body').on('click', '.target', function () {
alert('我被点击了!!!');
});
});
</script>
</body>
</html>
解决办法
解决办法有6种:
将
click
事件直接绑定到目标元素(即.target
) 上将目标元素换成
<a>
或者<button>
等可点击的元素给目标元素添加一个空的
onclick=""
(<div class="target" onclick="">点击我!</div>)把
click
改成touchend
或touchstart
(注意加上preventDefault)将
click
元素委托到非document
或body
的父级元素上给目标元素加一条样式规则
cursor: pointer;
(cursor: pointer; -webkit-tap-highlight-color: transparent;)
推荐后两种。推测在 Safari 中,不可点击元素的点击事件是不会冒泡到父级元素的。通过添加 cursor: pointer;
使得元素变成了可点击的了。
补充
iOS系统 input
及 input内元素 cursor: pointer;
失效,使得在 iOS系统 上需要借助 cursor
属性才能生效的 click
事件无法触发
解决办法
设置 font-size: 0;
把
click
改成touchend
(注意加上preventDefault);
IOS下的 click 点击失效的更多相关文章
- [转]iOS Safari 中click点击事件失效的解决办法
iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...
- 移动端ios中click点击失效
原因: Safari应该有某种机制用来节约资源,就是如果元素摸起来不像可以点的,就不给他响应事件. 所以,需要在点击的元素上加上{cursor:pointer},就解决了.当然还有别的方法,检点来说就 ...
- iOS Safari 中click点击事件失效的解决办法
问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document ...
- IOS下自定义click事件使用alert引发的血案
使用过iscroll插件的同学都知道iscroll支持自定义事件,即在调用iscroll时参数赋值options.click = true. 接下来定义事件如: $clinicAppoint.on(' ...
- IOS - Safari中click点击事件无效
做web移动端页面时,安卓端一点问题也没,发现在ios真机上点击事件无效,发现Safari下只有默认可点击的元素才click点击事件,像span div等元素是不具有点击事件的. 解决问题四种方式: ...
- 兼容性之IOS下label 无法点击
今天做移动端的页面时碰到一个稀奇的问题,那就是点击label无法选中与之相关的checkbox,下面是问题代码: <li class="list-item clearfix notif ...
- ios下按钮click事件点击穿透问题
和app进行混合开发的时候,一个页面使用h5写的,按钮上绑定click事件会触发下面图片上的a链接导致跳转,页面如图 顶部是一个banner,分vr.视频.图片三部分,红框处的三个nav按钮绑定cli ...
- 移动端ios下H5的:active样式失效的解决方法
在body上绑定一个touchstart事件,空函数就行: document.body.addEventListener('touchstart', function(){}, false) 或者在b ...
- chrome浏览器模拟手机端:jquery click()点击无效解决方法
$(".sku-wrap .ok").click(); chrome浏览器模拟手机端,在油猴插件中写JS代码,然后发现click()点击失效. 解决方法:jquery的click( ...
随机推荐
- android中实现监听的四种方法
(1)自身类作为事件监听器 package cn.edu.gdmec.s07150745.work5; import android.support.v7.app.AppCompatActivity; ...
- It's a Mod, Mod, Mod, Mod World (类欧几里得模板题
https://vjudge.net/contest/317000#problem/F #include <iostream> #include <cstdio> #inclu ...
- CSS所有选择器
.class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素 1 * * ...
- 代码内存泄露检测工具(linux gcc + valrind)
参考博客: https://www.cnblogs.com/wangkangluo1/archive/2011/07/20/2111248.html linux命令如下:valgrind --tool ...
- resful风格
package com.atguigu.springboot.controller; import com.atguigu.springboot.dao.DepartmentDao; import c ...
- SQLServer索引的四个高级特性
一Index Building Filter索引创建时过滤 二Index Include Column索引包含列 三聚集索引Cluster Index 四VIEW INDEX视图索引 SQLSer ...
- 深入浅出 Java Concurrency (38): 并发总结 part 2 常见的并发场景[转]
常见的并发场景 线程池 并发最常见用于线程池,显然使用线程池可以有效的提高吞吐量. 最常见.比较复杂一个场景是Web容器的线程池.Web容器使用线程池同步或者异步处理HTTP请求,同时这也可以有效的复 ...
- 《DSP using MATLAB》Problem 7.37
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
- 全栈之路-微信小程序-架构总览
第一阶段是用来学习小程序开发的,这个就相当于PC端的网站吧,只不过现在依靠微信强大的流量来将业务搬移到小程序中,对于企业来说,这是一种很好的发展方向,既减少了开发成本,又减少了推广成本,小程序是很被人 ...
- vue.js_10_vue的路由
1.vue-router的基本使用 1>安装vue-rouder路由模块 <script src="js/vue-2.4.0.js"></script> ...