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