需求:移动端开发经常需要img标签,但在安卓系统下,img图片点击会先默认自动放大再执行该元素的点击事件,需要清除这个默认放大的动作
解决办法:
-
return false
Orev.preventDefault()
- 给
img
的click
事件清除默认行为就可以了 - 缺点: 如果
img
没有click
事件,还需要绑定事件。如果img
很多,添加起来就比较麻烦
-
pointer-events:none
(墙裂推荐)
-
pointer-events
是CSS属性,指定在什么情况下某个特定的图形元素可以称为鼠标事件的target
。大部分值和Canvas有关,这里主要用auto和none两个值
-pointer-events: none
: 元素永远不会称为鼠标事件的target。所以这时候img
的click
无效,图片不会放大 -
pointer-events:auto
: 与未指定时的表现效果相同。可以用来还原图片的点击
正确的打开方式
- 如果img图片已经绑定了click事件,可以在函数里清除默认事件
- 如果img图片没有绑定事件,在
css
里添加pointer-events: none
。 - 如果img已经有了pointer-events: none的CSS属性,又需要触发点击事件,需要把值改成
pointer-events: auto