记一次移动端CSS引发的小Bug

最新推荐文章于 2022-10-17 15:41:24 发布

薛定谔的panda

最新推荐文章于 2022-10-17 15:41:24 发布

阅读量427

点赞数

分类专栏： CSS 文章标签： css 点击穿透

本文链接：https://blog.csdn.net/u014168594/article/details/77586539

版权

本文记录了一次在移动端H5页面遇到的CSS点击事件问题。在iOS上，由于span标签默认不可点击，导致click事件失效。解决方案是阻止事件冒泡或修改CSS。特别是当使用伪元素::before时，不能直接用JQ处理，可以利用pointer-events属性让元素穿透，允许点击事件传递到下方元素。

摘要由CSDN通过智能技术生成

翻开我的博客，大部分都是关于知识点的总结、防混淆、查漏补缺的文章，没有什么关于实际操作的解决办法，刚好今天遇到了一些关于CSS的问题，稍稍记录下来，给我以后写实际操作的技术博客练手。

好吧，言归正传。今天要在一个H5页面中，添加一个点击事件。

很简单吧，但是这个点击事件的位置有点风骚，兄弟节点有点击事件，父节点也有点击事件。
怎么办呢？没问题，根据事件的三个阶段：捕获阶段，目标阶段，冒泡阶段如下图。

在这里插入图片描述

因为我使用JQ这样写：

$('body').on('click','.topics .topic .no-subscribe',function(event){
	...
}

意思是当事件冒泡到body的时候，才会触发。

所以，我们就要在达到目标阶段阻止冒泡。

$('body').on('click','.topics .topic .no-subscribe',function(event){
   event.stopPropagation();
   ......
  });

stopPropagation() 函数就是专门阻止事件在冒泡阶段继续冒泡的。

好了，我觉得这样完美。然而我还是太年轻。iOS那边点击不了，安卓却可以。

我们

关注

专栏目录