vue一个字，杂CSS惊喜属性

CSS之pointer-events属性

2017-07-11  本文已影响0人  FoolishFlyFox

pointer-events 可选的属性值

其中，对于非 <svg> 元素，只有属性 auto 和 none 有效；

为非 svg 元素指定属性值

情况1：两个父子元素重叠

有如下代码：

<style type="text/css">
    #div_grandfather{
        height : 250px;
        background: orange;
        width:300px;
        border:1px solid;
    }
    #div_parent{
        height:70%;
        background-color:#bbb;
        margin:30px;
        border: 1px solid;
        /*设置元素的 pointer-event属性*/
        pointer-events: auto;
    }
    #div_child{
        height:70%;
        background-color:deepskyblue;
        margin:30px;
    }
</style>
<body>
    <div id="div_grandfather" onclick="alert('grandfather')">
        <div id="div_parent" onclick="alert('parent')">
            <div id="div_child" onclick="alert('child')">
            </div>
        </div>
    </div>
</body>

其显示为：

父子多元素重叠

此时，若 #div_parent 的css属性ponter-events 设为 auto ，则点击蓝色区域后，浏览器会3次弹出对话框，第一次内容为 child ，第二次内容为 parent ，第三次内容为 grandfather；

若 #div_parent 的css属性 pointer-events 设为 none ，则点击蓝色区域后，浏览器只会弹出对话框一次，内容为 grandfather ；

总结：

  1. 元素默认的 pointer-events 属性为 auto ，鼠标(其实不一定是鼠标，也可以是手或触摸笔对屏幕的动作) 在该元素的一个动作能够被该元素捕获，进行相应代码的执行后，会将该事件转交给父元素执行相应动作；
  2. 将元素的 pinter-events 属性设置为 none，鼠标的动作将不能被该元素及其子元素所捕获，但是能够被其父元素所捕获；

情况2：两个同级元素的重叠

<style type="text/css">
    #div1{
        position: absolute;
        height:250px;
        width:250px;
        background-color:#bbb;
        top:20px;
        left:20px;
    }
    #div2{
        position: absolute;
        height: 150px;
        width: 150px;
        background-color:deepskyblue;
        top:40px;
        left:40px;
        pointer-events: auto;
    }
</style>
<body>
    <div id="div1" onclick="alert('div1')"></div>
    <div id="div2" onclick="alert('div2')"></div>
</body>

其显示为：

同级元素的重叠

当 #div2 的 pointer-events 属性为 "auto" 时，当点击蓝色区域后，浏览器只弹出对话框一次，内容为：div2；当 #div2 的 pointer-events 属性为 none 时，点击蓝色区域后，浏览器只弹出对话框一次，内容为 div1 ；

总结：

  1. 若HTML上两个元素之间没有包含关系，那么，鼠标事件就不会在这两个元素之间传递，而是上层的元素会覆盖下层的元素，导致下层元素捕获不到事件；将上层元素的 pointer-events 属性设置为 none ，则上层元素将不捕获事件，那么事件将被下层元素捕获到；
  2. 若HTML上两个元素间有包含关系，那么，子元素获得鼠标事件后，会传递给父元素；

可见，事件的传递并不是依赖于元素在显示上的上下层关系，而是依赖于DOM树结构；

为SVG 元素指定属性值

剩余的8个属性值都是为SVG元素而准备的；

首先，我们需要知道，一个图形有两部分组成，一部分是轮廓线，另一部分是填充；轮廓线通过 stroke 完成，填充通过 fill 完成；

visiblePainted

该属性值等价于 auto ； 当 svg 中的某个元素可见，并且当其 fill 不是 none 时，点击填充部分，该事件能够被捕捉到，当其 stroke 不是 none 时，点击轮廓部分，该事件能够被捕捉到；

<svg style="pointer-events:visiblePointed;">
   <circle cx="30" cy="30" r="20" stroke="black" stroke-width="10"
      fill="red"  onclick="alert('circle')" />
</svg>

html 的 svg显示为：

pic-1
点击之后(无论点击的是黑色轮廓还是红色填充)，会弹出一个对话框，内容为 circle ；

当将 circle 中 fill 的属性变为 none ，显示变为：

pic-2

此时，没有填充，点击黑色轮廓能够弹出对话框，而点击中间的白色部分将不能弹出对话框；

visibleFill

将svg的 pointer-events 属性设置为visibleFill后：

<svg style="pointer-events:visiblePointed;">
   <circle cx="30" cy="30" r="20" stroke="black" stroke-width="10"
      fill="none"  onclick="alert('circle')" />
</svg>

显示与 pic-2 一样；此时，无论 fill 的值是不是 none，点击填充后，都能弹出对话框，而点击轮廓一定不能弹出对话框；

下面几个属性都这样说明下去未免太过罗嗦，下面是总结的一个表，对8种属性的统一说明：

|属性名|fill||stroke||visibility||
|-|-|-|
|属性值|none|非none|none|非none|hidden|visible|
|visiblePainted|×|√|×|√|×|-|
|visibleFill|√|√|×|×|×|-|
|visibleStroke|×|×|√|√|×|-|
|visible|√|√|√|√|×|-|
|painted|×|√|×|√|-|-|
|fill|√|√|×|×|-|-|
|stroke|×|×|√|√|-|-|
|all|√|√|√|√|-|-|
|none|×|×|×|×|×|×|

解释：

完！

上一篇下一篇

猜你喜欢

热点阅读