专栏首页钻芒博客解决wap手机百度APP中 网站img标签点击跳转图片

解决wap手机百度APP中 网站img标签点击跳转图片

今天发现手机百度客户端中普通的img标签点击动作会被跳转到图片链接,(这个问题是我们运营跟我讲的,不然我也没发现。)应该是手机百度APP抽风了。img标签也能给当成a标签。

由于我们的网站图片链接到电话,用户点击图片会弹出拨打电话弹窗,但这个过程在手机百度app中就会存在图片和电话弹窗同时跳转,非常影响用户体验。遂搜索然后解决。

方法就是给网站(或者文章内)的图片img加上css属性:pointer-events

在css中添加

img{ pointer-events: none; }

就可以啦。

那么同时我们顺便来学习一下这个pointer-events

语法none元素永远不会成为鼠标事件的target。

语法

pointer-events属性被指定为从下面的值列表中选择的一个关键字。

autopointer-events属性未指定时的表现效果相同,对于SVG内容,该值与visiblePainted效果相同none元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。visiblePainted

只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标:

  • visibility属性值为visible,且鼠标指针在元素内部,且fill属性指定了none之外的值
  • visibility属性值为visible,鼠标指针在元素边界上,且stroke属性指定了none之外的值

visibleFill只适用于SVG。只有在元素visibility属性值为visible,且鼠标指针在元素内部时,元素才会成为鼠标事件的目标,fill属性的值不影响事件处理。visibleStroke只适用于SVG。只有在元素visibility属性值为visible,且鼠标指针在元素边界时,元素才会成为鼠标事件的目标,stroke属性的值不影响事件处理。visible只适用于SVG。只有在元素visibility属性值为visible,且鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标,fillstroke属性的值不影响事件处理。painted

只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标:

  • 鼠标指针在元素内部,且fill属性指定了none之外的值
  • 鼠标指针在元素边界上,且stroke属性指定了none之外的值

visibility属性的值不影响事件处理。

fill只适用于SVG。只有鼠标指针在元素内部时,元素才会成为鼠标事件的目标,fillvisibility属性的值不影响事件处理。stroke只适用于SVG。只有鼠标指针在元素边界上时,元素才会成为鼠标事件的目标,strokevisibility属性的值不影响事件处理。all只适用于SVG。只有鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标,fillstrokevisibility属性的值不影响事件处理。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css文字块-display行内元素块 inline-block 只给文字加背景

    我们想要实现第二行的效果,所以用display: inline-block;给文字定义为行内元素块。只给第二行文字部分添加背景。

    AlexTao
  • wordpress接入QQ等社交登录插件[QQWorld通行证]钻芒二开美化版

    今天给钻芒博客接入社交登录,博客使用了QQWorld通行证插件,觉得图标不好看,就仿照Foxlogin写的登录前端样式。

    AlexTao
  • wordpress速度优化-静态页写入内存

    昨天博客加了WP Super Cache缓存插件,速度提升明显。使用这类插件可以将PHP动态页面在首次访问时生成html静态页面并存储在硬盘中,当其他访客再次访...

    AlexTao
  • CSS——属性列表

    Html5知典
  • 前端基础精简总结

    ES5: String、Number、Boolean、Null、Undefined、Object ES6增: Symbol 其中,object为引用,其...

    超然
  • css应知应会 第一集

    ================================================

    李才哥
  • DIV+CSS初学者需重视的10个简单问题与技巧

    DIVCSS初学者往往感觉自己遇到很多莫明其妙的问题,其实只是一些小细节没有引起重视,下面罗列了10个问题与技巧,温故而知新。 一、检查HTML元素是否有拼写错...

    用户1667431
  • H5 和 CSS3 新特性

    HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证

    Krry
  • CSS大部分属性汇总

    白胡杨同学
  • 学习WPF——了解WPF中的XAML

    XAML的简单说明 XAML是用于实例化.NET对象的标记语言,主要用于构建WPF的用户界面 XAML中的每一个元素都映射为.NET类的一个实例,例如<B...

    liulun

扫码关注云+社区

领取腾讯云代金券