demo

// DOM結構 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 點擊藍色塊（div3）

?

?

2.?div3 沒有 z-index: -1 點擊藍色塊（div3）

?

?

結論：

1. z-index沒有影響DOM結構

2. z-index形成了層疊上下文，導致觸發事件的元素不一樣，上文的demo來說： div3加上z-index: -1后， div2位于他的上方，此時，即使點擊div3所在的位置，仍然觸發的是div2，所以，根據事件先捕獲后冒泡的的機制： div1 -> div2 -> div2 -> div1，因為事件機制并不會往觸發事件的元素的后代繼續傳播

3. z-index 會影響觸發事件的元素，并不會影響事件機制的本身。

?

相關姿勢：

z-index:

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

負z-index值?—— 層疊上下文內有著負z-index值的子元素。

塊級盒?—— 文檔流中非行內非定位子元素。

浮動盒?—— 非定位浮動元素。

行內盒?—— 文檔流中行內級別非定位子元素。

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

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

?

flex與z-index的關系

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

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

轉載于:https://www.cnblogs.com/nanchen/p/10118599.html

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。