mozilla
您的搜索结果

    pointer-events

    概述

    CSS属性pointer-events允许作者控制特定的图形元素在何时成为属性事件的target。当未指定该属性时,SVG内容表现如同visiblePainted

    除了指定元素不成为鼠标事件的目标,none值还指示鼠标事件穿过该元素,并指向位于元素下面的元素。

    语法

    pointer-events:  auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
    

    auto
    pointer-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属性的值不影响事件处理。

    Examples

    Example 1

    /* Example 1: Makes all the img non-reactive to any mouse events such as dragging, hovering, clicking etc */
    img {
      pointer-events: none;
    }

    Example 2

    Makes the link to http://example.com non-reactive.

    <ul>
    <li><a href="https://developer.mozilla.org/">MDN</a></li>
    <li><a href="http://example.com">example.com</a></li>
    </ul>
    a[href="http://example.com"] {
      pointer-events: none;
    }

    Notes

    使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标,那么指向该元素的任何事件在事件传播过程中都将通过父元素,并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获(将会穿过父元素而指向位于其下面的元素)。

    我们希望为HTML提供更为精细的控制(而不仅仅是autonone),以控制元素哪一部分何时会捕获鼠标事件。如果你有独特的想法,请添加至wiki页面的Use Cases部分,以帮助我们如何针对HTML扩展pointer-events

    该属性也可用来提高滚动时的帧频。的确,当滚动时,鼠标悬停在某些元素上,则触发其上的hover效果,然而这些影响通常不被用户注意,并多半导致滚动出现问题。对body元素应用pointer-events:none,禁用了包括hover在内的鼠标事件,从而提高滚动性能。

    Specifications

    Specification Status Comment
    Scalable Vector Graphics (SVG) 1.1 (Second Edition) Recommendation  

    Its extension to HTML elements, though present in early drafts of CSS Basic User Interface Module Level 3, has been pushed to its level 4.

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    SVG support 1.0 1.5 (1.8) 9.0 9.0 (2.0) 3.0 (522)
    HTML/XML content 2.0 3.6 (1.9.2) 11.0 15.0 4.0 (530)
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? ? ? ? ?

    See also

    文档标签和贡献者

    此页面的贡献者有: hutuxu, teoli
    最后编辑者: teoli,