uniapp image标签在H5打包后无法点击问题

 

分析问题原因：由于image标签在转换为H5后会有下面属性

 

uni-image { pointer-events: none; }

 

解决方案：可以在项目的App.vue全局添加下面属性解决

 

uni-image { pointer-events: auto; }

 

详解：

pointer-events接口代表了由 指针 引发的DOM事件的状态，包括接触点的位置，引发事件的设备类型，接触表面受到的压力等。

指针 是输入设备的硬件层抽象（比如鼠标，触摸笔，或触摸屏上的一个触摸点）。指针 能指向一个具体表面（如屏幕）上的一个（或一组）坐标。

指针的 击中检测 指浏览器用来检测 指针事件的目标元素的过程。大多数情况下，这个目标元素是由 指针的位置和元素在文章中的位置和分层共同决定的。

 

例子：

auto：效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。。

none：元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。

// 屏蔽点击 $('body').css('pointer-events', 'none'); //恢复默认 $('body').css('pointer-events', 'auto');