欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

在IOS开发中,动态加载数据点击事件失效问题解决

程序员文章站 2022-11-20 14:53:23
动态数据的创建与绑定 在实际的开发中,我们常常需要通过动态加载数据,来创建页面的dom,而且给这些新增的元素添加事件也是不可避免的。 而对于动态数据的事件绑定,就需要明白两个概念,就是目标元素和代理...

动态数据的创建与绑定

在实际的开发中,我们常常需要通过动态加载数据,来创建页面的dom,而且给这些新增的元素添加事件也是不可避免的。

而对于动态数据的事件绑定,就需要明白两个概念,就是目标元素和代理元素(委托元素);

(1)目标元素:动态创建的元素,最终click事件需要绑定到该元素

(2)代理元素:动态创建的元素的父级元素,即非动态创建的父元素,比如我们习惯上使用document,body等,但这不是唯一的。

bug描述

如果【目标元素】是可点击的(比如 button、a 标签),此时click事件还是有效的。

如果【代理元素】是document或body,并且【目标元素】是默认不可点击的(如 p, span 等),此时ios上的click事件会失效,无法触发事件;

// 这里使用jquery

$(document).on('click', 'li', function(){

    console.log('点击了li标签');

    })

原因

因为ios认定只有可点击的dom对象才可以触发点击事件,比如<a>和<button>标签,对于非点击对象,需要将其变为可点击对象;

解决方案

(1)将 click 事件直接绑定到目标元素(即 .target ) 上

不能用于动态加载的dom元素

$('.target').click(function(){

    console.log("点击目标元素");

})

(2)将目标元素换成 <a> 或者 <button> 等可点击的元素,

但是需要去除按压效果: 

-webkit-tap-highlight-color: transparent;

(3)给目标元素添加一个空的点击事件: onclick=""

不推荐使用这种行内js的方法

<p class="target" onclick=""><span>点击我!</span></p>

// 样式

.target span {

  pointer-events: none;//禁用元素上绑定的事件

}

(4)把 click 改成 touchend 或 touchstart

注意:需要加上preventdefault 或 return false 来阻止事件冒泡

(5)将 click 元素委托到非 document 或 body 的父级元素上;

注意:委托的元素不可以是动态加载的dom元素;

(6)给目标元素加一条样式规则:

.target{

    cursor: pointer;    //定义鼠标指针悬浮在元素上方显示的鼠标光标

    -webkit-tap-highlight-color: transparent;//去除按压效果

}

最后,webkit内核的有一些特殊的属性,在处理兼容的时候,还是需要多多了解^-^