美文网首页WEB前端开发技术杂谈
html+css移动端禁用长摁保存图片

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

作者: 传奇狗 | 来源:发表于2018-12-19 10:48 被阅读0次

        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 设置为其他值),在这种情况下,鼠标事件将在它们往返于后代的路径上触发此元素上的事件侦听器在事件捕获/ 泡沫阶段。

    相关文章

      网友评论

        本文标题:html+css移动端禁用长摁保存图片

        本文链接:https://www.haomeiwen.com/subject/cxbdkqtx.html