提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔
文章目錄
- 前言
- 一、概念
- 其他事件
- 頁面加載事件
- 元素滾動事件
- 頁面尺寸事件
- 元素尺寸與位置
- 二、案例舉例
- 電梯導航
前言
- 掌握阻止事件冒泡的方法
- 理解事件委托的實現原理
一、概念
1.事件流
事件流是對事件執行過程的描述，了解事件的執行過程有助于加深對事件的理解，提升開發實踐中對事件運用的靈活度。
如上圖所示，任意事件被觸發時總會經歷兩個階段：【捕獲階段】和【冒泡階段】。
簡言之，捕獲階段是【從父到子】的傳導過程，冒泡階段是【從子向父】的傳導過程。
2.捕獲和冒泡
事件流是如何影響事件執行的:
結合事件流的特征，我們知道當某個元素的事件被觸發時，事件總是會先經過其祖先才能到達當前元素，然后再由當前元素向祖先傳遞，事件在流動的過程中遇到相同的事件便會被觸發。
- 事件相繼觸發的【執行順序】，事件的執行順序是可控制的，即可以在捕獲階段被執行，也可以在冒泡階段被執行。
- 如果事件是在冒泡階段執行的，我們稱為【冒泡模式】，它會先執行子盒子事件再去執行父盒子事件，默認是冒泡模式。
- 如果事件是在捕獲階段執行的，我們稱為【捕獲模式】，它會先執行父盒子事件再去執行子盒子事件。
結論：
addEventListener第3個參數決定了事件是在捕獲階段觸發還是在冒泡階段觸發addEventListener第3個參數為true表示捕獲階段觸發，false表示冒泡階段觸發，默認值為false- 事件流只會在父子元素具有相同事件類型時才會產生影響
- 絕大部分場景都采用默認的冒泡模式（其中一個原因是早期 IE 不支持捕獲）
3.阻止冒泡
阻止冒泡是指阻斷事件的流動，保證事件只在當前元素被執行，而不再去影響到其對應的祖先元素。
事件對象中的 ev.stopPropagation 方法，專門用來阻止事件冒泡。
鼠標經過事件：
mouseover 和 mouseout 會有冒泡效果
mouseenter 和 mouseleave 沒有冒泡效果 (推薦)
4.事件委托
事件委托是利用事件流的特征解決一些現實開發需求的知識技巧，主要的作用是提升程序效率。
大量的事件監聽是比較耗費性能的，如下代碼所示
<script>// 假設頁面中有 10000 個 button 元素const buttons = document.querySelectorAll('table button');for(let i = 0; i <= buttons.length; i++) {// 為 10000 個 button 元素添加了事件buttons.addEventListener('click', function () {// 省略具體執行邏輯...})}
</script>
利用事件流的特征，可以對上述的代碼進行優化，事件的的冒泡模式總是會將事件流向其父元素的，如果父元素監聽了相同的事件類型，那么父元素的事件就會被觸發并執行，正是利用這一特征對上述代碼進行優化，如下代碼所示：
<script>// 假設頁面中有 10000 個 button 元素let buttons = document.querySelectorAll('table button');// 假設上述的 10000 個 buttom 元素共同的祖先元素是 tablelet parents = document.querySelector('table');parents.addEventListener('click', function () {console.log('點擊任意子元素都會觸發事件...');})
</script>
事件對象中的屬性 target 或 srcElement屬性表示真正觸發事件的元素，它是一個元素類型的節點。
<script>// 假設頁面中有 10000 個 button 元素const buttons = document.querySelectorAll('table button')// 假設上述的 10000 個 buttom 元素共同的祖先元素是 tableconst parents = document.querySelector('table')parents.addEventListener('click', function (ev) {// console.log(ev.target);// 只有 button 元素才會真正去執行邏輯if(ev.target.tagName === 'BUTTON') {// 執行的邏輯}})
</script>
優化過的代碼只對祖先元素添加事件監聽，相比對 10000 個元素添加事件監聽執行效率要高許多！！！
其他事件
頁面加載事件
加載外部資源（如圖片、外聯CSS和JavaScript等）加載完畢時觸發的事件
有些時候需要等頁面資源全部處理完了做一些事情
事件名：load
監聽頁面所有資源加載完畢：
window.addEventListener('load', function() {// xxxxx
})
元素滾動事件
滾動條在滾動的時候持續觸發的事件
window.addEventListener('scroll', function() {// xxxxx
})
頁面尺寸事件
會在窗口尺寸改變的時候觸發事件：
window.addEventListener('resize', function() {// xxxxx
})
元素尺寸與位置
獲取元素的自身寬高、包含元素自身設置的寬高、padding、border
offsetWidth和offsetHeight
獲取出來的是數值,方便計算
注意: 獲取的是可視寬高, 如果盒子是隱藏的,獲取的結果是0
二、案例舉例
電梯導航
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>小兔鮮兒 - 新鮮 惠民 快捷!</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="renderer" content="webkit"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/index.css">
</head><body><!-- 項部導航 --><div class="xtx_topnav"><div class="wrapper"><!-- 頂部導航 --><ul class="xtx_navs"><li><a href="javascript:;">請先登錄</a></li><li><a href="javascript:;">免費注冊</a></li><li><a href="javascript:;">我的訂單</a></li><li><a href="javascript:;">會員中心</a></li><li><a href="javascript:;">幫助中心</a></li><li><a href="javascript:;">在線客服</a></li><li><a href="javascript:;"><i class="mobile sprites"></i>手機版</a></li></ul></div></div><!-- 頭部 --><div class="xtx_header"><div class="wrapper"><!-- 網站Logo --><h1 class="xtx_logo"><a href="/">小兔鮮兒</a></h1><!-- 主導航 --><div class="xtx_navs"><ul class="clearfix"><li><a href="javascript:;">首頁</a></li><li><a href="javascript:;">生鮮</a></li><li><a href="javascript:;">美食</a></li><li><a href="javascript:;">餐廚</a></li><li><a href="javascript:;">電器</a></li><li><a href="javascript:;">居家</a></li><li><a href="javascript:;">洗護</a></li><li><a href="javascript:;">孕嬰</a></li><li><a href="javascript:;">服裝</a></li></ul></div><!-- 站內搜索 --><div class="xtx_search clearfix"><!-- 購物車 --><a href="javascript:;" class="xtx_search_cart sprites"><i>2</i></a><!-- 搜索框 --><div class="xtx_search_wrapper"><input type="text" placeholder="搜一搜"></div></div></div></div><!-- 分類及焦點圖 --><div class="xtx_entry"><div class="wrapper"><!-- 分類 --><div class="xtx_category"><!-- 頂級分類 --><ul class="xtx_category_super"><li><a href="javascript:;">生鮮<small>水果</small><small>蔬菜</small></a><i class="sprites"></i></li><li class="active"><a href="javascript:;">美食<small>面點</small><small>干果</small></a><i class="sprites"></i></li><li><a href="javascript:;">電器<small>數碼產品</small></a><i class="sprites"></i></li><li><a href="javascript:;">居家<small>床品</small><small>四件套</small><small>被枕</small></a><i class="sprites"></i></li><li><a href="javascript:;">洗護<small>洗發洗護</small><small>美妝</small></a><i class="sprites"></i></li><li><a href="javascript:;">孕嬰<small>奶粉</small><small>玩具</small><small>輔食</small></a><i class="sprites"></i></li><li><a href="javascript:;">餐櫥<small>數碼產品</small></a><i class="sprites"></i></li><li><a href="javascript:;">服飾<small>女裝</small><small>男裝</small></a><i class="sprites"></i></li><li><a href="javascript:;">雜貨<small>戶外</small><small>圖書</small></a><i class="sprites"></i></li><li><a href="javascript:;">品牌<small>品牌制造</small></a><i class="sprites"></i></li></ul><!-- 子分類 --><div class="xtx_category_subset"></div></div><!-- 焦點圖 --><div class="xtx_banner"><ul><li><a href="javascript:;"><img src="./uploads/banner_1.png" alt=""></a></li></ul><!-- 切換按鈕 --><a href="javascript:;" class="prev sprites"></a><a href="javascript:;" class="next sprites"></a><!-- 指示器 --><div class="indicator"><span></span><span></span><span class="active"></span><span></span><span></span></div></div></div></div><!-- 新鮮好物 --><div class="xtx_goods_new xtx_panel"><div class="wrapper"><!-- 面板頭部 --><div class="xtx_panel_header"><h3>新鮮好物<small>新鮮出爐 品質靠譜</small></h3><a href="javascript:;" class="more">查看全部<i class="sprites"></i></a></div><!-- 商品列表 --><div class="xtx_panel_goods_1"><a href="javascript:;"><img src="./uploads/new_goods_1.jpg" alt=""><span class="name">睿米無線吸塵器F8</span><span class="price"><small>￥</small>899</span></a><a href="javascript:;"><img src="./uploads/new_goods_2.jpg" alt=""><span class="name">智能環繞3D空調</span><span class="price"><small>￥</small>1299</span></a><a href="javascript:;"><img src="./uploads/new_goods_3.jpg" alt=""><span class="name">廣東軟軟糯米煲仔飯</span><span class="price"><small>￥</small>129</span></a><a href="javascript:;"><img src="./uploads/new_goods_4.jpg" alt=""><span class="name">羅西機械智能手表</span><span class="price"><small>￥</small>3399</span></a></div></div></div><!-- 人氣推薦 --><div class="xtx_goods_popular xtx_panel"><div class="wrapper"><!-- 面板頭部 --><div class="xtx_panel_header"><h3>人氣推薦<small>人氣爆款 不容錯過</small></h3></div><!-- 商品列表 --><div class="xtx_panel_goods_1"><a href="javascript:;"><img src="./uploads/popular_1.jpg"><span class="title">特惠推薦</span><span class="alt">我猜得到 你的需要</span></a><a href="./index-hot.html"><img src="./uploads/popular_2.jpg"><span class="title">爆款推薦</span><span class="alt">人氣好物推薦</span></a><a href="./index-one.html"><img src="./uploads/popular_3.jpg"><span class="title">場景使用一站買全</span><span class="alt">編輯精心整理推薦</span></a><a href="javascript:;"><img src="./uploads/popular_4.jpg"><span class="title">領券中心</span><span class="alt">發現更多超值優惠券</span></a></div></div></div><!-- 熱門品牌 --><div class="xtx_goods_brand xtx_panel"><div class="wrapper"><div class="xtx_panel_header"><h3>熱門品牌<small>國際經典 品質保證</small></h3><div class="page-bar"><a href="javascript:;" class="prev sprites"></a><a href="javascript:;" class="next sprites active"></a></div></div><!-- 商品列表 --><div class="xtx_goods"><ul><li><a href="./index-brand.html"><img src="./uploads/brand_goods_1.jpg" alt=""></a><a href="./brand-list.html"><img src="./uploads/brand_goods_2.jpg" alt=""></a><a href="javascript:;"><img src="./uploads/brand_goods_3.jpg" alt=""></a><a href="javascript:;"><img src="./uploads/brand_goods_4.jpg" alt=""></a><a href="javascript:;"><img src="./uploads/brand_goods_5.jpg" alt=""></a></li></ul></div></div></div><!-- 分類商品 --><div class="xtx_goods_category xtx_panel"><div class="wrapper"><!-- 生鮮 --><div class="xtx_panel_header"><h3>生鮮</h3><a href="javascript:;" class="more">查看全部<i class="sprites"></i></a><div class="tabs-bar"><a href="javascript:;" class="active">水果</a><a href="javascript:;">蔬菜</a><a href="javascript:;">肉禽蛋</a><a href="javascript:;">褲裝</a><a href="javascript:;">襯衫</a><a href="javascript:;">內衣</a></div></div><!-- 商品列表 --><div class="xtx_panel_goods_2"><ul class="clearfix"><li><a href="javascript:;"><img src="./uploads/fresh_goods_cover.jpg" alt=""></a><div class="label"><span>生鮮館</span><span>全場3件8折</span></div></li><li><!-- 商品圖片 --><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_1.jpg" alt=""></div></a><!-- 商品信息 --><div class="meta"><p class="name">美威 智利原味三文魚排 240g/袋 4片裝</p><p class="flag">海鮮年貨</p><p class="price"><small>￥</small>59</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_2.jpg" alt=""></div></a><div class="meta"><p class="name">紅功夫 麻辣小龍蝦1.5kg 4-6錢/25-32只</p><p class="flag">火鍋食材</p><p class="price"><small>￥</small>71.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_3.jpg" alt=""></div></a><div class="meta"><p class="name">三都港 冷凍無公害黃花魚 700g 2條 袋裝</p><p class="flag">海鮮水產</p><p class="price"><small>￥</small>49.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_4.jpg" alt=""></div></a><div class="meta"><p class="name">漁公碼頭 大連鮮食入味 即食海參 遼參刺參 調味海</p><p class="flag">海鮮年貨</p><p class="price"><small>￥</small>899</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_5.jpg" alt=""></div></a><div class="meta"><p class="name">越南進口白心火龍果4個 裝 標準果 單果400-550g </p><p class="flag"></p><p class="price"><small>￥</small>29</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_6.jpg" alt=""></div></a><div class="meta"><p class="name">廣西沃柑 柑橘1.5kg</p><p class="flag">新鮮水果</p><p class="price"><small>￥</small>59</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_7.jpg" alt=""></div></a><div class="meta"><p class="name">進口 牛油果 6個裝 單果重約130-180g</p><p class="flag">新鮮水果</p><p class="price"><small>￥</small>39.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/fresh_goods_8.jpg" alt=""></div></a><div class="meta"><p class="name">泰國進口山竹5A級 500g </p><p class="flag">新鮮水果</p><p class="price"><small>￥</small>29.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li></ul></div><!-- 服飾 --><div class="xtx_panel_header"><h3>服飾</h3><a href="javascript:;" class="more">查看全部<i class="sprites"></i></a><div class="tabs-bar"><a href="javascript:;" class="active">行李箱</a><a href="javascript:;">男士包袋</a><a href="javascript:;">女士包袋</a><a href="javascript:;">錢包及小提袋</a><a href="javascript:;">男鞋</a><a href="javascript:;">女鞋</a><a href="javascript:;">拖鞋</a></div></div><!-- 商品列表 --><div class="xtx_panel_goods_2"><ul class="clearfix"><li><a href="javascript:;"><img src="./uploads/clothes_goods_cover.jpg" alt=""></a><div class="label"><span>服飾館</span><span>3折狂歡</span></div></li><li><!-- 商品圖片 --><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_1.jpg" alt=""></div></a><!-- 商品信息 --><div class="meta"><p class="name">人本秋季厚底帆布鞋 韓版低幫增高學生</p><p class="flag"></p><p class="price"><small>￥</small>55</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_2.jpg" alt=""></div></a><div class="meta"><p class="name">迪士尼真皮針扣表帶寬度 14-16mm規格雙色壓紋 女表帶</p><p class="flag">海鮮年貨</p><p class="price"><small>￥</small>20.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_3.jpg" alt=""></div></a><div class="meta"><p class="name">三都港 冷凍無公害黃花魚 700g 2條 袋裝</p><p class="flag">海鮮水產</p><p class="price"><small>￥</small>209</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_4.jpg" alt=""></div></a><div class="meta"><p class="name">ONLY夏季新款高腰寬松 七分闊腿裙褲休閑褲</p><p class="flag"></p><p class="price"><small>￥</small>274.5</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_5.jpg" alt=""></div></a><div class="meta"><p class="name">拉夫勞倫t恤男正品 </p><p class="flag">圓領短袖</p><p class="price"><small>￥</small>99</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_6.jpg" alt=""></div></a><div class="meta"><p class="name">李寧跑步鞋男鞋空氣 弧2018春季款</p><p class="flag"></p><p class="price"><small>￥</small>79</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_7.jpg" alt=""></div></a><div class="meta"><p class="name">Dickies男鞋2020春季 英倫休閑工裝鞋低幫</p><p class="flag"></p><p class="price"><small>￥</small>179</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/clothes_goods_8.jpg" alt=""></div></a><div class="meta"><p class="name">北極絨春夏季純棉背心 男士修身純色打底</p><p class="flag"></p><p class="price"><small>￥</small>69</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li></ul></div><!-- 餐廚 --><div class="xtx_panel_header"><h3>餐廚</h3><a href="javascript:;" class="more">查看全部<i class="sprites"></i></a><div class="tabs-bar"><a href="javascript:;" class="active">水果</a><a href="javascript:;">蔬菜</a><a href="javascript:;">肉禽蛋</a><a href="javascript:;">褲裝</a><a href="javascript:;">襯衫</a><a href="javascript:;">內衣</a></div></div><!-- 商品列表 --><div class="xtx_panel_goods_2"><ul class="clearfix"><li><a href="javascript:;"><img src="./uploads/kitchen_goods_cover.jpg" alt=""></a><div class="label"><span>餐廚館</span><span>大額優惠<br>等你來拿</span></div></li><li><!-- 商品圖片 --><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_1.jpg" alt=""></div></a><!-- 商品信息 --><div class="meta"><p class="name">創意可愛不銹鋼便攜餐具 套裝筷子便攜三件套</p><p class="flag"></p><p class="price"><small>￥</small>5.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_2.jpg" alt=""></div></a><div class="meta"><p class="name">三金西瓜霜竹炭牙刷軟毛 成人家用家庭裝</p><p class="flag"></p><p class="price"><small>￥</small>20.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_3.jpg" alt=""></div></a><div class="meta"><p class="name">樸（TOPOTO）大衛免手 洗平板拖把拓撲懶人木地 板刮刮樂桶拖布</p><p class="flag"></p><p class="price"><small>￥</small>129</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_4.jpg" alt=""></div></a><div class="meta"><p class="name">ONLY夏季新款高腰寬松 七分闊腿裙褲休閑褲</p><p class="flag"></p><p class="price"><small>￥</small>274.5</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_5.jpg" alt=""></div></a><div class="meta"><p class="name">金紡不傷手柔順劑 媽媽的選擇</p><p class="flag"></p><p class="price"><small>￥</small>29</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_6.jpg" alt=""></div></a><div class="meta"><p class="name">潔成綿柔抹布洗碗巾超 值5片裝 洗鍋刷碗</p><p class="flag"></p><p class="price"><small>￥</small>10.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_7.jpg" alt=""></div></a><div class="meta"><p class="name">大衛雙驅動旋轉拖把桶 免手洗拓撲拖布地拖墩布 </p><p class="flag"></p><p class="price"><small>￥</small>159</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/kitchen_goods_8.jpg" alt=""></div></a><div class="meta"><p class="name">斧頭牌（AXE）去污地板 清潔劑2L 檸檬清香 </p><p class="flag">海鮮年貨</p><p class="price"><small>￥</small>22.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li></ul></div><!-- 居家 --><div class="xtx_panel_header"><h3>居家</h3><a href="javascript:;" class="more">查看全部<i class="sprites"></i></a><div class="tabs-bar"><a href="javascript:;" class="active">咖啡具</a><a href="javascript:;">水具酒具</a><a href="javascript:;">鍋具</a><a href="javascript:;">餐具</a><a href="javascript:;">功能廚具</a><a href="javascript:;">茶具</a><a href="javascript:;">清潔保鮮</a></div></div><!-- 商品列表 --><div class="xtx_panel_goods_2"><ul class="clearfix"><li><a href="javascript:;"><img src="./uploads/home_goods_cover.jpg" alt=""></a><div class="label"><span>居家館</span><span>全場滿減</span></div></li><li><!-- 商品圖片 --><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_1.jpg" alt=""></div></a><!-- 商品信息 --><div class="meta"><p class="name">菜鳥異常專用鏈接 非請 勿拍</p><p class="flag">海鮮年貨</p><p class="price"><small>￥</small>8999</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_2.jpg" alt=""></div></a><div class="meta"><p class="name">【中鹽軟水鹽】漢斯希 爾家用軟水機適配</p><p class="flag"></p><p class="price"><small>￥</small>65</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_3.jpg" alt=""></div></a><div class="meta"><p class="name">云米凈水壺家用直飲臺式 凈水機滲透過濾自來水</p><p class="flag">海鮮年貨</p><p class="price"><small>￥</small>129</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_4.jpg" alt=""></div></a><div class="meta"><p class="name">ztk恒溫調奶器配件玻璃壺 燉盅</p><p class="flag">海鮮年貨</p><p class="price"><small>￥</small>129</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_5.jpg" alt=""></div></a><div class="meta"><p class="name">蕎麥枕頭單人枕芯雙人 護頸椎枕頭芯</p><p class="flag"></p><p class="price"><small>￥</small>29</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_6.jpg" alt=""></div></a><div class="meta"><p class="name">Bear/小熊 LLJ-B04G1 家用多功能切碎機 電動</p><p class="flag">料理機</p><p class="price"><small>￥</small>10.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_7.jpg" alt=""></div></a><div class="meta"><p class="name">榮事達薄餅機春餅春卷皮 家用博餅機電餅鐺 </p><p class="flag"></p><p class="price"><small>￥</small>159</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li><li><a href="javascript:;"><div class="img-box"><img src="./uploads/home_goods_8.jpg" alt=""></div></a><div class="meta"><p class="name">美式雙人實木床 紅實木 顯檔次</p><p class="flag"></p><p class="price"><small>￥</small>22.9</p></div><!-- 其它 --><div class="extra"><a href="javascript:;"><span>找相似</span><span>發現現多寶貝></span></a></div></li></ul></div></div></div><!-- 最新主題 --><div class="xtx_goods_topic xtx_panel"><div class="wrapper"><div class="xtx_panel_header"><h3>最新專題</h3><a href="javascript:;" class="more">查看全部<i class="sprites"></i></a></div><div class="xtx_topic"><ul class="clearfix"><li><a href="javascript:;"><img src="./uploads/topic_goods_1.jpg" alt=""><div class="meta"><p class="title">吃這些美食才不算辜負自己<small>餐廚起居洗護好物</small></p><span class="price"><small>￥</small>29.9起</span></div></a><div class="social"><span class="like"><i class="sprites"></i>1220</span><span class="view"><i class="sprites"></i>1800</span><span class="reply"><i class="sprites"></i>1220</span></div></li><li><a href="javascript:;"><img src="./uploads/topic_goods_2.jpg" alt=""><div class="meta"><p class="title">吃這些美食才不算辜負自己<small>餐廚起居洗護好物</small></p><span class="price"><small>￥</small>29.9起</span></div></a><div class="social"><span class="liked"><i class="sprites"></i>1220</span><span class="view"><i class="sprites"></i>1800</span><span class="reply"><i class="sprites"></i>1220</span></div></li><li><a href="javascript:;"><img src="./uploads/topic_goods_3.jpg" alt=""><div class="meta"><p class="title">吃這些美食才不算辜負自己<small>餐廚起居洗護好物</small></p><span class="price"><small>￥</small>29.9起</span></div></a><div class="social"><span class="like"><i class="sprites"></i>1220</span><span class="view"><i class="sprites"></i>1800</span><span class="reply"><i class="sprites"></i>1220</span></div></li></ul></div></div></div><!-- 公共底部 --><div class="xtx_footer clearfix"><div class="wrapper"><!-- 聯系我們 --><div class="contact clearfix"><dl><dt>客戶服務</dt><dd class="chat">在線客服</dd><dd class="feedback">問題反饋</dd></dl><dl><dt>關注我們</dt><dd class="weixin">公眾號</dd><dd class="weibo">微博</dd></dl><dl><dt>下載APP</dt><dd class="qrcode"><img src="./uploads/qrcode.jpg"></dd><dd class="download"><span>掃描二維碼</span><span>立馬下載APP</span><a href="javascript:;">下載頁面</a></dd></dl><dl><dt>服務熱線</dt><dd class="hotline">400-0000-000<small>周一至周日 8:00-18:00</small></dd></dl></div></div><!-- 其它 --><div class="extra"><div class="wrapper"><!-- 口號 --><div class="slogan"><a href="javascript:;" class="price">價格親民</a><a href="javascript:;" class="express">物流快捷</a><a href="javascript:;" class="quality">品質新鮮</a></div><!-- 版權信息 --><div class="copyright"><p><a href="javascript:;">關于我們</a><a href="javascript:;">幫助中心</a><a href="javascript:;">售后服務</a><a href="javascript:;">配送與驗收</a><a href="javascript:;">商務合作</a><a href="javascript:;">搜索推薦</a><a href="javascript:;">友情鏈接</a></p><p>CopyRight © 小兔鮮兒</p></div></div></div></div><!-- 電梯 --><div class="xtx-elevator"><ul class="xtx-elevator-list"><li><a href="javascript:;" data-name="new">新鮮好物</a></li><li><a href="javascript:;" data-name="popular">人氣推薦</a></li><li><a href="javascript:;" data-name="brand">熱門品牌</a></li><li><a href="javascript:;" data-name="topic">最新專題</a></li><li><a href="javascript:;" id="backTop"><i class="sprites"></i>頂部</a></li></ul></div><script>//1.頁面滾動到一定位置 電梯導航欄出現(/透明度=1)(function () {const xtx_elevator = document.querySelector('.xtx-elevator')const wrapper = document.querySelector('.xtx_goods_new .xtx_panel .wrapper')window.addEventListener('scroll', function () {xtx_elevator.style.opacity = document.documentElement.scrollTop >= 300 ? 1 : 0})})();//2.點擊電梯導航欄的‘返回頂部’，同時頁面scrollTop=0(function () {const backTop = document.querySelector('#backTop')backTop.addEventListener('click', function () {document.documentElement.scrollTop = 0})})();//3.點擊點擊導航欄除‘返回頂部’外,添加active同時頁面顯示對應內容（scrollTop更改成與某offsettop相同）(function () {const list = document.querySelector('.xtx-elevator-list')list.addEventListener('click', function (e) {if (e.target.tagName === 'A' && e.target.dataset.name) {const old = document.querySelector('.xtx-elevator-list .active') //!!!!if (old) {old.classList.remove('active') //}e.target.classList.add('active')const item = document.querySelector(`.xtx_goods_${e.target.dataset.name}`) //！！！document.documentElement.scrollTop = item.offsetTop}})})();//4.頁面滾動到某位置區間，電梯導航欄的對應位置classList.add('active')const news = document.querySelector('.xtx_goods_new')const popular = document.querySelector('.xtx_goods_popular')const brand = document.querySelector('.xtx_goods_brand')const topic = document.querySelector('.xtx_goods_topic')window.addEventListener('scroll', function () {const old = document.querySelector('.xtx-elevator-list .active') //!!!!if (old) {old.classList.remove('active') //}if (document.documentElement.scrollTop >= news.offsetTop && document.documentElement.scrollTop < popular.offsetTop) {document.querySelector('[data-name=new').classList.add('active') //導航條} else if (document.documentElement.scrollTop >= popular.offsetTop && document.documentElement.scrollTop < brand.offsetTop) {document.querySelector('[data-name=popular').classList.add('active')} else if (document.documentElement.scrollTop >= brand.offsetTop && document.documentElement.scrollTop < topic.offsetTop) {document.querySelector('[data-name=brand').classList.add('active')} else if (document.documentElement.scrollTop >= topic.offsetTop) {document.querySelector('[data-name=topic').classList.add('active')}})</script></body></html>)
)
