ApiCloud 动态生成dom元素绑定事件在IOS端失效的问题

2019-06-11 20:50:00 3580 2 编辑:深正互联 来源:互联网

在ApiCloud app上动态生成的dom绑定事件,在andriod端正常,但是在ios端失效。主要原因可归根于在ios端safari浏览器浏览器处理事件冒泡上


Safari中是这样处理事件冒泡的:

1.点击某个DIV或其他元素。

2.发现没有处理该事件,继续往上冒泡。

3.直到冒泡到body下面的子节点为止,还是没有人处理该事件的话,就把该事件丢弃掉。不再往上冒泡。

4.只要在这一条冒泡链当中,有一个节点处理了该事件,它就不会丢弃该事件,会继续往上冒,冒到body 然后document然后window。

网站建设

解决方法:


一、那么解决办法就是在body的下级,写个空函数接收一下事件


$("body").children().click(function () {

      //这里不要写任何代码

});


二、使用touchstart或者touchend代替click事件。触屏事件问题,如果触发了touchmove,touchend就不会被触发了,而且touchmove没有持续触发。在touchstart的时候调用下event.preventDefault(); 阻止冒泡事件,即可让其他事件都正常被触发。


三、将事件直接写到dom的onclick上,可以成功调用。onclick=””


四、safari认为添加css属性cursor: pointer;才是可点击区域,IOS认定只有可点击的DOM对象才可以触发点击事件,比如a、button标签,对于非点击对象,需要将其变为可点击对象;


.btn{

    cursor: pointer;//重点加上这个属性,解决问题

}

<div>

    <button class="btn">按钮</button>

</div>

$('body').on('click', '.btn', function(){


});


五、引入fastclick.js,页面初始化,解决IOS点击失效、点透、延时300毫秒的问题


<!DOCTYPE HTML>

<html>


<head>

    <meta charset="utf-8">

    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />

    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">

    <title></title>

</head>


<body>

  

</body>

<script type="text/javascript" src="../../../script/api.js"></script>

<script type="text/javascript" src="../../../script/fastclick.min.js"></script>

<script type="text/javascript">

    apiready = function() {

        api.parseTapmode();

        FastClick.attach(document.body); //消除300ms

    }

</script>


</html>


本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通