safari移动端网页点击事件无效

#首次点击时,没有执行点击事件,而是虚拟键盘弹了下去(https://img-ask.csdn.net/upload/201711/16/1510829072_766726.jpg)
虚拟键盘弹下去之后,再次点击按钮,才能触发事件(https://img-ask.csdn.net/upload/201711/16/1510829140_145204.jpg)
这个页面可以上下滑动,滑动后,浏览器自带的下方工具栏隐藏,此时,点击按钮时,不会触发事件,而是下方工具栏显示出来](http://himg.ask.csdn.net/upload/201711/16/1510829210_863601.jpg)
在下方工具栏存在的前提下,按钮事件才会生效(https://img-ask.csdn.net/upload/201711/16/1510829357_930238.jpg)
账号里没有C币啊,谢谢大家了

0

1个回答

可以使用以下代码测试

<!DOCTYPE html>




iOS click bug test
<style>
    .container {
    }

    .target {
        display: block;
        text-align: center;
        margin: 100px 30px 0;
        padding: 10px 0;
        border: 1px solid #ccc;
    }
</style>




Click Me!

<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>



解决方法
​将 click 事件直接绑定到目标​元素(​​即 .target)上
将目标​元素换成 或者 button 等可点击的​元素
​将 click 事件委托到​​​​​非 document 或 body 的​​父级元素上
​给​目标元素加一条样式规则 cursor: pointer;

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

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
iOS Safari 中点击事件失效的解决办法
问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效。 可以使用下面的代码在 iOS 中进行测试。 iOS click bug test .container {
Web丨IOS系統下Safari浏览器中div点击事件无效的解决办法:
1、把div改换为a、button 等具有可点击性的标签元素,添加 curson:pointer 鼠标样式 2、把点击事件直接绑定到需要点击的标签上,而不是其祖先级,尽量不要用事件委托 曾在两个项目中适配IOS手机端Safari浏览器时遇到此问题,一个用第一种方法解决,另一个用方法一无效后搭配方法二解决。 ...
safari浏览器下body,document,window的click事件无效处理方法
在做移动端效果的时候,会碰到做弹窗的效果,弹窗之后点击空白处关闭弹窗,但是苹果手机上的QQ浏览器UC浏览器点击body、document、window都无效。最后找到了解决办法,就是给要点击的元素加个css样式cursor:pointer; 当然,document和window是不能给的。 所以只能给body加个此属性即可。暂时还未发现别的解决办法。(虽然这样解决了问题,但是又发现另一个问题,就是...
iOS Safari 中click点击事件失效的解决办法
问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效。 解决办法 解决办法有 4 种可供选择: ​将 cli
safari浏览器实现模拟click点击事件
在项目中经常会用到onclick点击事件触发效果,如给button按钮添加一个点击事件:<button id="btn">点我</button> <script> var btn = document.getElementById("btn"); btn.onclick = function(){ alert("终于点我了!"); } </script>然而有
safari 移动端适配问题 padding 不起作用
苹果黑科技。。。。。。。。。[;padding:0;margin:0;];  
移动端(html5)Safari下用keyup实时监控input值的变化无效
搜索框依据用户输入的值实时检索,一开始自然而然想到keyup,在拼音状态时,啥问题也没有, 问题1:切换到中文输入法,问题出来了,keyup事件不灵便了,后来在网上搜了下,找到了思路, 问题2:微信公众平台开发时,客户提需求“输入框中输入内容时,输入框后边显示清除按钮,清除输入框中的内容”,使用“keyup”事件时在中文输入法下部分按键keyup事件无效, 方法一:主要是给搜索框注册focus
IOS下Safari中click点击事件无效
用mui+vue做移动端页面时,js绑定的onclick事件在ios真机上点击无效, 绑定mui的tap事件,安卓真机上又无效。 发现在Safari下只有默认可点击的元素才可以触发click点击事件,像div、span 等元素不具有点击事件。 以下有四种解决办法: 将 click 事件直接绑定到目标​元素上 将目标​元素换成 &amp;lt; a&amp;gt; 或者 button 等可点击的​元素 将 cli...
iOS 浏览器safari中使用JQuery click事件无效解决方法
1.给被绑定的元素添加CSS样式 cursor:pointer; 2.被绑定元素的标签如果是div 或 span 尽可能换成 button 或 a 标签里要有href属性,否则不生效。 3.将click事件直接绑定在目标元素上: $(document).on('click', '.clickable-div', function() { fire event }); 4.使用
ios下Safari无法触发click事件的处理
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;122&amp;lt;/title&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-sc
a:hover伪类在ios移动端浏览器内无效的解决方法
a:active 设置的样式在ios系统的浏览器内显示不出来,看来在iOS系统的移动设备中,需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。代码如下:document.body.addEventListener('touchstart',function(){});
vue移动端绑定click事件失效问题
原因可能是你使用了better-scroll,默认它会阻止touch事件。所以在配置中需要加上click: true 例: mounted(){ this.scroll=new Bscroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: true }) }...
html页面在IOS-safari浏览器下绑定点击绑定事件的div时会显示灰色框的问题
在某DIV上绑定点击事件,点击这个div时整个DIV都会变成灰色shany
IOS Safari与微信浏览器中点击事件失效的解决办法
使用当委托给一个元素添加click事件时,如果的英文事件委托到document或body上,并且委托的元素是默认不可点击的(如div,span等),此时click事件会失效。 可以使用下面的代码在iOS中进行测试。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; ...
Safari移动端 数字被识别成电话号码
测试时发现网站上的手机号变颜色了(原来是白色的),现在变成了黑色。一开始以为样式出了什么问题,后来在PC端及其他手机浏览器查看,发现颜色依旧是白色。点击还会弹出菜单呼叫的选项。 本来的背景就是黑色 现在电话号变成黑色 就看不到了。 为了这个问题,到Safari的官网翻找,发现Safari有个私有meta属性可以解决这个问题。 在...之间添加以下代码即可解决。
pc端点击事件在移动端失效(zepto)
jQuery 和 Zepto 是不能一起引入的,否则会有冲突。 只引入Zepto 的前提下,jQuery的部分方法是不能用的(toggle、slideUp、slideDown...) 所以实际上触发了事件,但是看不到效果,误以为没有触发.... var 移动端 = 手机真机环境调试(不是浏览器模仿的移动端); 什么onclick、$(document).on();、$(docume
移动端 Safari 踩坑记录
移动端 Safari中:hover导致的两次点击问题 问题描述:在移动端的Safari中,如果使用了:hover会导致两次点击事件的发生,如a标签链接到一个新地址,如果a标签使用了:hover就会造成第一次点击时响应:hover,第二次才响应a标签的跳转。 解决方案: 1. 监听`ontouchstart`事件 给body添加一个`no-touch`的class,用于限制`:hover
基于html5开发中点击事件在移动端的问题总结
对于刚接触html5开发配合zepto.js 和 jq 开发移动app,因为之前用jq的事件比较多,所以在移动端的点击事件很多时候还是用的click事件,对于大部分需求是可以实现,但是使用这个点击事件在ios设备上容易出现白屏的情况,查阅了一些文章配合自己的经验总结了一个结论,jq的click事件一般会有350ms的延迟,可能是由于设备需要用它来判断用户是不是在使用手势,这样在一般的web应用上问...
各浏览中对 MAP 和 AREA 元素的事件处理行为不同
from : http://w3help.org/zh-cn/causes/HO2009   标准参考 MAP 和 AREA 元素通常组合起来使用为图片要设置一个超链接区域。使用时将 IMG 元素的 "usemap" 属性1关联到一个 MAP 元素上,这个 MAP 元素的
safari浏览器下body、document、window的click事件无效处理办法
safari浏览器下body、document、window的click事件无效处理办法
手机(移动端)点击事件失效问题(微信?使用iscroll?)
1.问题重现: 微信ios内置浏览器认为,不是button  a标签之外的非点击元素  比如div  是不可点击的,比如给div绑了click事件   在微信里边是不生效的,解决办法是给这个div元素添加一个样式属性cursor: pointer;  那么我今天遇到的问题当然没有这么简单。  2.弹框中某个区域内内容很多,我们希望使用overflow:scroll;当超过之后,可以滚动查...
Safari打不开该网页,因为网址无效
应用中的一个webView页面要用到PC端,然后将链接打到苹果手机Safari网址里,打开则提示下图页面: 7EA40CE5-C957-4F89-8B50-27D5DC6805F5.png 命名打开了,却又报了&quot;Safari打不开该网页,因为网址无效&quot;,很是疑惑。 然后,百度了下相关问题,然后带着问题和自己的判断去问后台,确认是: 打开此链接,...
完美解决ios10及以上Safari无法禁止缩放的问题
完美解决 ios10 及以上 Safari 无法禁止缩放的问题 转载自掘金-互联网学徒 移动端web缩放有两种: 双击缩放 双指手势缩放 在 iOS 10之前,iOS 和 Android 都可以通过一行 meta 标签来禁止页面缩放: &amp;lt;meta content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0,...
移动端ios直接设置currentTime无效解决方法
前段时间做过一个项目,每个页面设置了同一个背景音乐,但客户要求音乐从一个页面进入另一个页面后,要接着上一页面播放时间播放,所以进入新页面后设置currentTime为上个页面播放时间 但ios系统直接设置无效,在判断音乐可播放时(canplay)再设置currentTime才可以,但在安卓设备上也这样判断设置则也无效,所以要根据不同系统设置,以下是针对ios、安卓系统设置的代码 注:$myVi...
手机浏览器中使用IScroll使click及a跳转事件无效
最近在页面中用iscroll.js,但是但是有跳转,用a标签的href进行跳转发现没有用,之后转换成用点击事件,发现依然不起作用,经过查询发现是禁止了浏览器的默认事件。 有的方法说如果用button或input代替a,都能响应click事件。 如果设置click为true,原来不能点击的手机能点击了,但是原来能点击的手机变成了双击,也就是将手机本身的click和iscroll的click各执
移动端用户屏幕缩小放大无效!
-
图片点击事件,ios有的页面不触发事件
iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效。
移动端动态节点绑定事件ios点击失效
当你的DOM节点是动态生成在页面上的时候。 普通的点击$(‘xx’).click()会因为获取不到dom元素而致使点击失效。 一 这种情况下一般使用时间托管例如jq的:$(document).on('xx','click',fn)这个通过事件托管可以让jq获取到动态生成的dom节点,以此解决点击失效的问题。 二 然而在ios上这样的方法解决不了这个问题,原因是: 在ios系统中,例如
解决iOS的Safari浏览器解析绑定了onclick事件闪烁的问题
开发游戏公告信息网页时遇到了一个这样的问题:在iOS设备上点击绑定了onclick事件的标题会出现闪烁的问题一下是解决方法: 点击与click 对于a标记的点击导航,默认是在onclick事件中处理的。而移动客户端对onclick的响应相比PC浏览器有着明显的几百毫秒延迟。 在移动浏览器中对触摸事件的响应顺序应当是: ontouchstart -> ontouchmove ->
苹果设备移动端点击无效click失效的解决办法
$ (document).on('click','.gift-right',function(e){ alert('发现点击无效'); }) 以上代码在电脑浏览器和安卓上都能触发alert事件,但是在ios上却完全没有反应 查阅了很多信息后,说是iphone这些元素上没有click事件,它是touch事件, 就是说如果这个name标签是button的可click事件则是可以触发的,因为d...
safari中不能响应click()的问题
转载:http://www.cnblogs.com/EMTeam/archive/2013/07/11/3183321.html safari下如果用document.getElementById("id").click()触发点击事件,是没有效果的 解决办法: var e = document.createEvent('MouseEvent');     e.initEvent('cl
完美解决,手机浏览器端,点击返回后事件无效
我们都知道,在浏览器端,使用 window.onunload 或者 window.onbeforeunload 无效。所以在手机端,总是做不了关闭确认这个事情。 这边我使用了,window.history 特性,来实现需求 先看代码 function onBeforeUnload () { window.history.pushState( nul...
点击click事件在iPad没有响应
本来在ipad使用tap事件,工作的很好。但是需求改变,要适应PC跟ipad,所以索性直接替换zepto改成jquery。理想不错,但是现实是,在浏览器上click事件工作得很好,切换到模拟器上面,也运行不错,但是切换到真机ipad上面,悲剧了,根本不响应click事件。查看了一遍又输出,还是木有反应。急了,只能求助谷歌了,click no action in pad 第一条出来的就是stackov
怎样处理 Safari 移动端对图片资源的限制
原文作者:Thijs van der Vossen本文翻译自《How to work around the Mobile Safari image resource limit》,原文写于2010年10月25日。可能部分限制已经不再适用。翻译本文的目的是作为《读Zepto源码之assets模块》的附文,读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto正文开
iPhone X 响应式网页设计
以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。  24小时前,苹果公司推出了iPhone X。随之而来的是一个新的白色线条,幸福地坐在底部的触摸板上,它替代了原有的home键。这也唤起了人们对物理home键的怀旧情结。 顶部的黑色凹槽采用了许多最先进的技术:红外摄像头、环境感应器、光感传感器等——所有这些都
取消html 移动端 onclick点击事件高亮效果
-webkit-tap-highlight-color:rgba(0,0,0,0) //webkit是苹果浏览器引擎,tap点击,highlight背景高亮,color颜色,颜色用数值调节。 原因如下: 在移动端上,有事件监听的元素被点击的时候会被高亮显示,而-webkit-tap-highlight-color属性会在当用户点击iOS的Safari浏览器中的链接或JavaSc
ios移动端关于事件绑定区域点击闪屏的解决
最近做移动端的,在一块区域内绑定事件之后,在安卓上面没有任何问题,然而在iphone上却会出现闪屏,参考一些知名移动端的框架,例如bootstrap,在html和body标签上会添加上下面的这个csss属性:-webkit-tap-highlight-color: rgba(0,0,0,0);添加之后iPhone闪屏效果确实解决了。
解决IScroll5超链接点击无效的问题
移动端使用IScroll5做页面时突然发现超链接无效,在网上搜了很多方法,感觉用fastclick插件最简单暴力,直接页面的底部添加以下代码即可
Vue 移动端项目 百度地图 点击事件无效、不触发 解决方案
解决百度地图 手机端 点击事件不触发 的一种方案 版权声明:本文为博主原创文章,转载请标明原文出处。  个人技能手册:https://github.com/DevilMafia/personal-skill-tree 问题背景 我是半路接手的这个项目,该项目使用 Vue 开发的一款 手机端的页面。到手里时,使用百度地图的部分已经完成,之前的兄弟在开发是一只都是在 PC 端用浏览器的手机...
实现PC、移动端一键复制功能(某些机型无法支持,iPhone支持Safari 10+,自己的iPhone7用了几个浏览器都没问题);
今天公司后端问了我一个关于手机复制功能的实现,于是花了点时间写了这个Model,跟大家分享一下(第一次写,不好勿怪~~)调用的clipboard.js,它依赖于Selection和execCommand API,移动端有的机型不支持execCommand ,所以无法实现一键复制,这个做了另外处理,让用户手动复制,等会会上代码。通过运行clipboard.js  Clipboard.isSuppor...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 微信移动端网页开发教程 h5移动端网页小视频制作