pointer-events 可選的屬性值
- auto
- none
- visiblepainted
- visiblefill
- visiblestroke
- visible
- painted
- fill
- stroke
- all
其中声滥，對于非 <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;
/*設(shè)置元素的 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 設(shè)為 auto 醇蝴，則點擊藍色區(qū)域后，瀏覽器會3次彈出對話框贡茅，第一次內(nèi)容為 child 谊路，第二次內(nèi)容為 parent ，第三次內(nèi)容為 grandfather囱挑；
若 #div_parent 的css屬性 pointer-events 設(shè)為 none 醉顽，則點擊藍色區(qū)域后，瀏覽器只會彈出對話框一次看铆，內(nèi)容為 grandfather 徽鼎；
總結(jié)：
- 元素默認的
pointer-events屬性為auto，鼠標(其實不一定是鼠標，也可以是手或觸摸筆對屏幕的動作) 在該元素的一個動作能夠被該元素捕獲否淤，進行相應(yīng)代碼的執(zhí)行后悄但，會將該事件轉(zhuǎn)交給父元素執(zhí)行相應(yīng)動作； - 將元素的
pinter-events屬性設(shè)置為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" 時啰扛，當點擊藍色區(qū)域后嚎京，瀏覽器只彈出對話框一次，內(nèi)容為：div2隐解；當 #div2 的 pointer-events 屬性為 none 時鞍帝，點擊藍色區(qū)域后，瀏覽器只彈出對話框一次煞茫，內(nèi)容為 div1 帕涌；
總結(jié)：
- 若HTML上兩個元素之間沒有包含關(guān)系，那么续徽，鼠標事件就不會在這兩個元素之間傳遞蚓曼，而是上層的元素會覆蓋下層的元素，導(dǎo)致下層元素捕獲不到事件钦扭；將上層元素的
pointer-events屬性設(shè)置為none纫版，則上層元素將不捕獲事件，那么事件將被下層元素捕獲到客情； - 若HTML上兩個元素間有包含關(guān)系其弊，那么，子元素獲得鼠標事件后膀斋，會傳遞給父元素瑞凑；
可見，事件的傳遞并不是依賴于元素在顯示上的上下層關(guān)系概页，而是依賴于DOM樹結(jié)構(gòu)；
為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顯示為：
點擊之后(無論點擊的是黑色輪廓還是紅色填充)路操，會彈出一個對話框疾渴，內(nèi)容為 circle ；
當將 circle 中 fill 的屬性變?yōu)?none 屯仗，顯示變?yōu)椋?/p>
此時搞坝，沒有填充，點擊黑色輪廓能夠彈出對話框魁袜，而點擊中間的白色部分將不能彈出對話框桩撮；
visibleFill
將svg的 pointer-events 屬性設(shè)置為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距境，點擊填充后，都能彈出對話框垮卓，而點擊輪廓一定不能彈出對話框垫桂；
下面幾個屬性都這樣說明下去未免太過羅嗦，下面是總結(jié)的一個表粟按，對8種屬性的統(tǒng)一說明：
|屬性名|fill||stroke||visibility||
|-|-|-|
|屬性值|none|非none|none|非none|hidden|visible|
|visiblePainted|×|√|×|√|×|-|
|visibleFill|√|√|×|×|×|-|
|visibleStroke|×|×|√|√|×|-|
|visible|√|√|√|√|×|-|
|painted|×|√|×|√|-|-|
|fill|√|√|×|×|-|-|
|stroke|×|×|√|√|-|-|
|all|√|√|√|√|-|-|
|none|×|×|×|×|×|×|
解釋：
"√" 表示點擊相應(yīng)的部分(填充或輪廓)能夠被對應(yīng)的 svg元素所捕捉到诬滩； "×" 表示不能被對應(yīng)的svg元素捕捉到；"-" 表示沒影響灭将；
第一列表示
svg元素的 pointer-events 屬性的取值疼鸟；第二列表示當
fill為 none 時，點擊填充能否被捕捉到庙曙；第三列表示當
fill不為 none 時空镜，點擊填充能否被捕捉到；第四列表示當
stroke為 none 時捌朴，點擊輪廓能否被捕捉到吴攒；第五列表示當
stroke不為 none 時，點擊輪廓能否被捕捉到砂蔽；以上4中情況洼怔，
visibility都為默認值，即 visible左驾；第六列表示當設(shè)置
visiblility為 hidden 時镣隶，點擊元素是否能被捕捉到极谊，如果為 × ，表示無論點擊輪廓或填充安岂，都不能捕捉到轻猖，如果為 - 表示行為和前4種情況一樣，visibility不產(chǎn)生影響嗜闻；注意：因為元素隱藏蜕依，不能看到元素，所以所說的點擊填充只是其對應(yīng)的位置而已琉雳；第七列表示
visibilibty為 visible 時的情況样眠；可以看到，在pointer-events為 none 時翠肘，無論怎么設(shè)置檐束，元素都不能捕獲事件，可以理解為svg是所有 svg中元素的父元素束倍，父元素不能捕獲事件被丧，子元素必然不能捕獲；
完绪妹！
