html+css移动端禁用长摁保存图片

    pointer-events 主要的用途还是穿透元素,该pointer-events属性允许用户穿过遮罩点击到下面的目标元素。

    在移动端html中,浏览器自带的长摁保存图片功能,及时是让图片作为div的一个背景都会被触发,所以我们可以使用时间穿透,来禁掉长摁保存图片。pointer-events:none;就可以了


禁用长摁点击的效果

pointer-events的其他属性值:

visiblePainted

    当visibility属性设置为时 visible 以及当鼠标光标位于元素的内部(即“填充”)并且fill属性设置为除了none或之外的值时,该元素只能是鼠标事件的目标。鼠标光标位于元素的周边(ie-,'stroke')上,stroke属性设置为除了以外的值 none。

visibleFill

    当visibility属性设置为 visible 以及当鼠标光标位于元素的内部(即填充)上时,该元素只能是鼠标事件的目标。该fill属性的值不会影响事件处理 -

visibleStroke

    当visibility属性设置为时 visible 以及当鼠标光标位于元素的周边(即笔划)上时,该元素只能是鼠标事件的目标。stroke属性的值不会影响事件处理。

visible

    当visibility属性设置为visible并且鼠标光标在元素的内部(即填充)或周边(即,笔划)上方时,该元素可以是鼠标事件的目标。fill和stroke属性的值不会影响事件处理。

painted

    当鼠标光标位于元素的内部(即“填充”)并且fill属性设置为除了none或者鼠标光标位于周边之外的值时,该元素只能是鼠标事件的目标( ie-,'stroke')元素和stroke属性设置为除以外的值 none。visibility属性的值不会影响事件处理。

fill

    当指针位于元素的内部(即填充)上时,该元素只能是鼠标事件的目标。fill和visibility属性的值不会影响事件处理。

stroke

    当指针位于元素的周边(即笔划)上时,该元素只能是鼠标事件的目标。stroke和visibility属性的值不会影响事件处理。

all

    当指针位于元素的内部(即填充)或周边(即,笔划)上时,该元素只能是鼠标事件的目标。该值fill,stroke并且visibility属性不影响事件处理。

none

    该元素永远不会成为鼠标事件的目标,尽管鼠标事件可能会针对其后代元素(如果这些后代已 pointer-events 设置为其他值),在这种情况下,鼠标事件将在它们往返于后代的路径上触发此元素上的事件侦听器在事件捕获/ 泡沫阶段。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,581评论 1 11
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,862评论 1 92
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,664评论 0 6
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,907评论 1 45
  • 朋友 你要是看不见我的踪影 不要悲伤 不要心急 我只是在等待两个人的日子 不管你身边还站着谁 我已决定不参与三人游...
    今天也要好好学习yoursel阅读 88评论 0 3