demo

// DOM結(jié)構(gòu) class App extends React.Component {componentDidMount() {const div1 = document.getElementById('div1');const div2 = document.getElementById('div2');const div3 = document.getElementById('div3');// 捕獲階段處理div1.addEventListener('click', () => {console.log('div1 capturing');}, true); div2.addEventListener('click', () => {console.log('div2 capturing');}, true);div3.addEventListener('click', () => {console.log('div3 capturing');}, true); // 冒泡階段處理div1.addEventListener('click', () => {console.log('div1 bubbling');}, false);div2.addEventListener('click', () => {console.log('div2 bubbling');}, false);div3.addEventListener('click', () => {console.log('div3 bubbling');}, false);}render() {return (<div id="div1" className="div1" ><div id="div2" className="div2" ><div id="div3" className="div3"></div></div></div> );} }ReactDOM.render(<App />, mountNode); // css 代碼 .div1 {display: flex;width: 500px;height: 500px;border: 1px solid red;background: red; }.div2 {display: flex;width: 400px;height: 400px;background: green; }.div3 {width: 200px;height: 200px;background: blue;// z-index: -1; }

?

1.? div3 沒有 z-index: -1 點(diǎn)擊藍(lán)色塊（div3）

?

?

2.?div3 沒有 z-index: -1 點(diǎn)擊藍(lán)色塊（div3）

?

?

結(jié)論：

1. z-index沒有影響DOM結(jié)構(gòu)

2. z-index形成了層疊上下文，導(dǎo)致觸發(fā)事件的元素不一樣，上文的demo來說： div3加上z-index: -1后， div2位于他的上方，此時(shí)，即使點(diǎn)擊div3所在的位置，仍然觸發(fā)的是div2，所以，根據(jù)事件先捕獲后冒泡的的機(jī)制： div1 -> div2 -> div2 -> div1，因?yàn)槭录C(jī)制并不會(huì)往觸發(fā)事件的元素的后代繼續(xù)傳播

3. z-index 會(huì)影響觸發(fā)事件的元素，并不會(huì)影響事件機(jī)制的本身。

?

相關(guān)姿勢(shì)：

z-index:

背景和邊框?—— 形成層疊上下文的元素的背景和邊框。 層疊上下文中的最低等級(jí)。

負(fù)z-index值?—— 層疊上下文內(nèi)有著負(fù)z-index值的子元素。

塊級(jí)盒?—— 文檔流中非行內(nèi)非定位子元素。

浮動(dòng)盒?—— 非定位浮動(dòng)元素。

行內(nèi)盒?—— 文檔流中行內(nèi)級(jí)別非定位子元素。

z-index: 0?—— 定位元素。 這些元素形成了新的層疊上下文。

正z-index值?—— 定位元素。 層疊上下文中的最高等級(jí)。

?

flex與z-index的關(guān)系

《深入理解CSS中的層疊上下文和層疊順序》

《z-index和auto margins在flex布局中是如何工作的》

轉(zhuǎn)載于:https://www.cnblogs.com/nanchen/p/10118599.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的javaScript tips —— z-index 对事件机制的影响的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。