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问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
safari浏览器下body、document、window的click事件无效处理办法
在做移动端开发时,经常会做弹窗的效果,弹窗之后点击弹窗以外的地方弹窗关闭,开始我是这样做的 document.addEventListener(&quot;click&quot;,function(){ this.showIndex = -1; },false); 在电脑上没有问题,但是在移动端弹窗关闭不起作用了,原因是移动端用的是safari浏览器,safari浏览器下body...
Web丨IOS系統下Safari浏览器中div点击事件无效的解决办法:
1、把div改换为a、button 等具有可点击性的标签元素,添加 curson:pointer 鼠标样式 2、把点击事件直接绑定到需要点击的标签上,而不是其祖先级,尽量不要用事件委托 曾在两个项目中适配IOS手机端Safari浏览器时遇到此问题,一个用第一种方法解决,另一个用方法一无效后搭配方法二解决。 ...
iOS Safari 中点击事件失效的解决办法
问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效。 可以使用下面的代码在 iOS 中进行测试。 iOS click bug test .container {
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
IOS下Safari中click点击事件无效
用mui+vue做移动端页面时,js绑定的onclick事件在ios真机上点击无效, 绑定mui的tap事件,安卓真机上又无效。 发现在Safari下只有默认可点击的元素才可以触发click点击事件,像div、span 等元素不具有点击事件。 以下有四种解决办法: 将 click 事件直接绑定到目标​元素上 将目标​元素换成 &amp;lt; a&amp;gt; 或者 button 等可点击的​元素 将 cli...
移动端填坑:ios系统点击事件失效的解决办法
问题描述:在开发移动端页面的时候,经常会给元素添加点击事件,但在ios系统上会失效,以下是解决办法: 解决办法:给被点击元素添加 cursor:pointer; 样式即可,具体原理还未查到~
a:hover伪类在ios移动端浏览器内无效的解决方法
a:active 设置的样式在ios系统的浏览器内显示不出来,看来在iOS系统的移动设备中,需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。代码如下:document.body.addEventListener('touchstart',function(){});
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.使用
safari 第一次进入页面无法整体padding-left进行位置移动
safari 第一次进入页面无法整体padding-left进行位置移动 具体原因不详 解决方法 添加position: relative;即可
safari 移动端适配问题 padding 不起作用
苹果黑科技。。。。。。。。。[;padding:0;margin:0;];  
safari浏览器实现模拟click点击事件
在项目中经常会用到onclick点击事件触发效果,如给button按钮添加一个点击事件:<button id="btn">点我</button> <script> var btn = document.getElementById("btn"); btn.onclick = function(){ alert("终于点我了!"); } </script>然而有
vue移动端绑定click事件失效问题
原因可能是你使用了better-scroll,默认它会阻止touch事件。所以在配置中需要加上click: true 例: mounted(){ this.scroll=new Bscroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: true }) }...
手机(移动端)点击事件失效问题(微信?使用iscroll?)
1.问题重现: 微信ios内置浏览器认为,不是button  a标签之外的非点击元素  比如div  是不可点击的,比如给div绑了click事件   在微信里边是不生效的,解决办法是给这个div元素添加一个样式属性cursor: pointer;  那么我今天遇到的问题当然没有这么简单。  2.弹框中某个区域内内容很多,我们希望使用overflow:scroll;当超过之后,可以滚动查...
拖拽或点击上传(支持苹果safari浏览器)
&amp;lt;input type=&quot;file&quot; value=&quot;上传&quot;&amp;gt; 拖拽或点击上传(在safari浏览器不支持拖拽),主要解决safari浏览器的拖拽问题 jsp页面 &amp;lt;input type=&quot;file&quot; id=&quot;frontImg&quot; name=&quot;myfiles&quot; style=&quot;display:none;&quot;&amp;gt;
苹果设备移动端点击无效click失效的解决办法
$ (document).on('click','.gift-right',function(e){ alert('发现点击无效'); }) 以上代码在电脑浏览器和安卓上都能触发alert事件,但是在ios上却完全没有反应 查阅了很多信息后,说是iphone这些元素上没有click事件,它是touch事件, 就是说如果这个name标签是button的可click事件则是可以触发的,因为d...
js实现移动端H5页面音乐播放,兼容微信 safari浏览器
js代码: //音乐 function music(){ var oMusic=document.getElementById(&amp;quot;music&amp;quot;); var Audio=document.getElementsByTagName(&amp;quot;audio&amp;quot;)[0]; Audio.addEventListener(&amp;quot;ended&amp;quot;,function(event){
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应用上问...
iphone/safari手机不支持keyup事件的解决办法
需求:在移动端使用html5做模糊搜索的时候,需要根据用户在input输入框中输入的内容,进行模糊匹配。 首先根据的键盘事件,keydown() keypress() keyup(),由于keyup事件是在按键释放时触发,也就是按下键盘起来后的事件,因此选用的是keyup事件。 但是keyup在ios手机原生的输入法是不支持的,但是在ios端第三方的输入法搜狗输入法是支持的,为了兼容性,不能使
YY前端HTML规范
YY 前端HTML规范
javascript使用dispatchEvent解决如safari等高级浏览器js点击click失效的问题
上传功能,我们一般是另外做一个按钮将click函数绑定到上面去。最近给客户做头像上传的功能,在安卓机上试验没问题,但是使用ios的话,会出现上传按钮点击不了。查了一些资料应该是一些比较高级的浏览器对display为none的节点的一些限制。下面是我的解决办法使用dispatchEvent事件分发,来代替直接对file的click函数调用。$(document).on('click','#erer'...
苹果设备上div加onclick事件点击无效的解决办法
按照标签的语义化,button标签是用来点击的。而div,自己体会哈。给div加个属性  cursor:pointer;在苹果设备上onclick就有效了
手机浏览器中使用IScroll使click及a跳转事件无效
最近在页面中用iscroll.js,但是但是有跳转,用a标签的href进行跳转发现没有用,之后转换成用点击事件,发现依然不起作用,经过查询发现是禁止了浏览器的默认事件。 有的方法说如果用button或input代替a,都能响应click事件。 如果设置click为true,原来不能点击的手机能点击了,但是原来能点击的手机变成了双击,也就是将手机本身的click和iscroll的click各执
移动端网页:给body设置 overflow:hidden 无效的解决办法
做移动端网页的时候,总会遇到一些奇葩的问题,在PC端浏览器做模拟调试时,都是完美显示的,但是一到真机调试就是各种坑; 我在做移动端网页时的需求是这样的: 页面背景图片是自适应屏幕大小的,页面上有输入框和按钮,当点击输入框时,移动端的软键盘弹出,但是背景图片不能受影响而被压缩,且页面不能应为软键盘的弹出高度超出屏幕显示高度而上下滚动; 我的解决方案如下: 在页面初始化时,获取设备像素可见宽高...
全屏requestFullScreen在iOS移动端不可用
全屏的思路: 如果页面元素较少,可以采用将其他元素隐藏的方式;
移动端动态节点绑定事件ios点击失效
当你的DOM节点是动态生成在页面上的时候。 普通的点击$(‘xx’).click()会因为获取不到dom元素而致使点击失效。 一 这种情况下一般使用时间托管例如jq的:$(document).on('xx','click',fn)这个通过事件托管可以让jq获取到动态生成的dom节点,以此解决点击失效的问题。 二 然而在ios上这样的方法解决不了这个问题,原因是: 在ios系统中,例如
网页a链接 其他浏览器可以点开safari点了以后没有反应
今天碰到了如上问题,求助同事。找到原因。 safari不能穿透div点击事件。a链接所在标签被其他div盖住了。 解决:给a标签所在div添加 样式style=&quot;position: relative ; z-index: 1&quot; &amp;lt;div class=&quot;pic&quot; style=&quot;position: relative ; z-index: 1&quot;&amp;gt;  ...
移动端 position:fixed; 定位在iOS系统上失效,该怎么解决
今天公司运营人员在苹果手机上浏览页面时发现一个bug,就是根据浏览器窗口position:fixed; 定位在底部的元素,会随着屏幕的滚动而滚动,在iOS系统上失效,随后让我改。自己在网上搜了一些解决办法,最终觉得以下办法相对简单。如果有更简单的办法,欢迎各位大神互相交流,解决办法如下: html我就不写了,有兴趣的可以看看我修改的项目点击打开链接 把需要用手滑动的内容用clss为.conte
web 移动端 ios 浏览器中 animation 动画异常
关键字:animation,ios,移动端,异常解决问题的办法:页面dom加载完毕时延时给dom加上动画类名。即在vue的mounted钩子中用定时器延时100ms左右给需要动画的dom加上类名。 我们在写动画的时候常常会遇到添加简单css动画的需求,首选利用animation和@keyframe来实现。当需要一个无限动画的时候,anim...
移动端click失效的问题
解决办法有 5种可供选择: ​1、将 click 事件直接绑定到目标​元素(​​即 .target)上 2、将目标​元素换成 a 或者 button 等可点击的​元素 ​3、将 click 事件委托到​​​​​非 document 或 body 的​​父级元素上 ​4、给​目标元素加一条样式规则 cursor: pointer; ​5、 $.each($(&quot;.pt_ARL_box_aside...
Vue 移动端项目 百度地图 点击事件无效、不触发 解决方案
解决百度地图 手机端 点击事件不触发 的一种方案 版权声明:本文为博主原创文章,转载请标明原文出处。  个人技能手册:https://github.com/DevilMafia/personal-skill-tree 问题背景 我是半路接手的这个项目,该项目使用 Vue 开发的一款 手机端的页面。到手里时,使用百度地图的部分已经完成,之前的兄弟在开发是一只都是在 PC 端用浏览器的手机...
移动端遮罩层后方滚动处理
最近做项目,有一个一键分享的弹窗功能。 分享按钮以遮罩的形式布满整个屏幕,我采取position:absolute,四个方向的大小为0,做了个遮罩,但是发现时间会冒泡到底层的去,导致在遮罩上滑动屏幕也会使下层的body滚动起来。 想到的解决方法是阻止时间冒泡,所以在touchstart的时候,阻止了默认事件,但是导致遮罩上所有的点击事件不可用了。 说明我们事件阻止的位置不对,需要将点
解决z-index无效的问题!
设置了定位的元素比正常文档流层级高,要想让元素显示在上层,就得给它设置定位,如relative,absolute,fixed,这样z-index才会出现我们想要的结果。 但是不是每一次约会她都会出现,不是每一次设置了z-index它都能隐藏!   如上图,我想让文字覆盖蓝色线框。但设置z-index无效啊-------。 我在想,就算文字能覆盖线框,也只是文字部分能挡住,真是犹抱琵琶半...
移动端调试(ios手机safari+chrome调试(windows))
1、ios手机连接到pc设置手机safari   设置-》safari-》高级-》打开web检查器 (授权调试功能)2.、安装ios_webkit_debug_proxy根据文档,在windows下,首先需要安装scoop,而安装scoop需要电脑里有powershell。win10一般自带。2.1 安装scoop(一个安装工具)set-executionpolicy unrestricted -...
移动端用户屏幕缩小放大无效!
-
移动端ios直接设置currentTime无效解决方法
前段时间做过一个项目,每个页面设置了同一个背景音乐,但客户要求音乐从一个页面进入另一个页面后,要接着上一页面播放时间播放,所以进入新页面后设置currentTime为上个页面播放时间 但ios系统直接设置无效,在判断音乐可播放时(canplay)再设置currentTime才可以,但在安卓设备上也这样判断设置则也无效,所以要根据不同系统设置,以下是针对ios、安卓系统设置的代码 注:$myVi...
vue项目中使用better-scroll @click事件在移动端失效
原因是你使用了better-scroll,默认它会阻止touch事件。所以在配置中需要加上如下属性就可以了 mounted(){ this.scroll=new Bscroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: true }) } ...
移动端微信内置浏览器(或QQ浏览器)无法识别onclick事件的解决
1.微信内置浏览器(或QQ浏览器或safari浏览器)无法识别onclick事件的解决        对于这类不兼容的问题真的是很磨人,比较浪费时间,对于技术大牛可能不是问题,但是对于新手来说,可能就是个好几天无法解决的bug了。        现在市场份额最大的是google浏览器,它对各种前端语言兼容的最多,就如题目中所描述的问题,google浏览器很完美的兼容了。        问题主要出现...