2021-07-27 h5页面点击事件ios没反应 移动端兼容性问题

解决方法一:给触发点击事件动态添加的dom增加样式,cursor:pointer

解决方法二:增加一个touch事件

解决方法三:在元素上添加 onclick=""

<div class="btnbox" onclick=""></div>

在开发HTML DOM 元素上，需要留意DOM 重叠是存在两种结构。

DOM 重叠的两种结构：

针对上面的两类DOM 重叠，在解决对某一块 DOM 进行点击事件的触发时，采取的策略是完全不同。以下简单展开来说一下：

  这一类的重叠就是我们传统上的 DOM 树 Z 轴重叠，当点击 "子节点" 时，是可以通过事件捕获或者事件冒泡，来对每一层节点注册相对应的 “捕获” 或者 “冒泡”，从而实现相对应的事件的触发。

  在点击事件上，当我们希望点击事件触发的是父节点，而不是子节点时，但点击的却是子节点，那么我们只需改变 DOM 树 Z轴的顺序就可以实现，通过 z-index: xxx；来实现，z-index 数值越大，那么对应的Z 轴层级就越靠前，从而实现点击的是最靠前的DOM 节点。

  这类的节点的重叠是因为我们对这些节点的位置进行了移动，比如通过：float 浮动、position：absolute/relative；transform： translate（）等方式进行了位置的移动，从而引起了重叠。这类的DOM节点重叠，是不能实现 事件的“捕获/冒泡”的关联起来的，也不能通过 z-index 的改变层级权值来改变 Z轴的顺序的。

   这类DOM节点的重叠， 要实现 事件点击 能点击到下层DOM节点而不是点击移动过来的DOM节点，那么就需要使用到 css 的事件穿透属性 pointer-events: none这样就能使点击事件忽略上层设置了穿透的DOM节点，从而到达下层DOM 节点

动态加入到DOM中的对象无法继承原有的事件，所以无效，举例：

// $.ajax... ajax部分省略

var tr = ""

if(data.length){

    for(var i=0 i<data.length i++){

        tr = '<tr>'

        tr += '<td>' + data.status == 0 ? "正常" : "报警" + '<td>'

        tr += '</tr>'

        $("#table1").find("tbody").append(tr)

    }  

}

// tr的点击事件

$("#table1 tbody").find("tr").click(function(){

    // do something

})

上面的例子中，table1中原有的tr标签有点击事件，而通过ajax获取数据动态创建添加到DOM中的tr标签并没有继承点击事件，点击无任何反应。解决办法有两种：

纯js方法：将tr的点击事件写成函数，然后为动态创建的tr标签添加该函数的onclick事件：

for(var i=0 i<data.length i++){

        tr = '<tr onclick="OnTrClick()">' // 创建时为tr指定click事件

        tr += '<td>' + data.status == 0 ? "正常" : "报警" + '<td>'

        tr += '</tr>'

        $("#table1").find("tbody").append(tr)

}

jquery方法：jquery中可使用live()、on()两个方法来完成类似效果，其原理是利用事件委派机制，需要注意的是jquery 1.9版本已不再支持live()方法。

// tr的点击事件 (jquery 1.9以下)

$("#table1 tbody").find("tr").live("click", function(){

    // do something

})；

// tr的点击事件【推荐】 (jquery 1.7以上)

$("#table1 tbody").find("tr").on("click", function(){

    // do something

})

---