动态生成的html元素在iphone上点击事件失效

原文链接:https://yq.aliyun.com/articles/638578

2016年9月21日

动态生成html元素绑定事件 iphone上失效问题解决。多种方法,简单写几种。
第一种、使用touchstart或者touchend代替click事件。触屏事件问题,如果触发了touchmove,touchend就不会被触发了,而且touchmove没有持续触发。在touchstart的时候调用下event.preventDefault(); 阻止冒泡事件,即可让其他事件都正常被触发。
第二种、将事件直接写到dom的onclick上,可以成功调用。οnclick=""
第三种、safari认为添加css属性cursor: pointer;才是可点击区域,IOS认定只有可点击的DOM对象才可以触发点击事件,比如a、button标签,对于非点击对象,需要将其变为可点击对象;

 
  1. .btn-check {

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

  3. -webkit-tap-highlight-color: transparent;

  4. }

  • $('body').on('click', '.js-pay', function(){

  •  
  • });

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

     
    1. $(function() {

    2. FastClick.attach(document.body);

    3. });

    你可能感兴趣的:(css,iphone点击失效)