From 05c37a289a4f9f2c2a8640b70bfee975fa955102 Mon Sep 17 00:00:00 2001
From: gygirl <1308265464@qq.com>
Date: Sun, 4 Sep 2022 18:13:00 +0800
Subject: [PATCH] =?UTF-8?q?'=E6=8F=90=E4=BA=A4spm=E4=BD=9C=E4=B8=9A'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html             | 28 ++++++++++++++++++++++-
 src/components/HelloWorld.vue | 43 ++++++++++++++++++++++++-----------
 2 files changed, 57 insertions(+), 14 deletions(-)
diff --git a/public/index.html b/public/index.html
index 3e5a139..9a852dc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,10 +8,36 @@
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
+    <!-- <div id="big">
+      <div id="center">
+          <div id="small"></div>
+      </div>
+  </div> -->
+
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+   
   </body>
+
+<!-- <script>
+  var big = document.querySelector('#big')
+  var center = document.querySelector('#center')
+  var small = document.querySelector('#small')
+  big.onclick = function (e) {
+      console.log('big');
+      console.log(e.target);
+
+  }
+  center.onclick = function () {
+      console.log('center');
+
+  }
+  small.onclick = function () {
+      console.log('small');
+
+  }
+</script> -->
+
 </html>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 5e4ce20..f6b2053 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,25 +1,42 @@
 <template>
-  <div class="hello" data-spma="aa">
-    <span>show spm:{{spmText}}</span>
-    <div data-spmb="bb">
-      <button data-spmc="cc">Click it</button>
+  <div class="hello" data-spm="aa" @click="collectInfo">
+    <span>show spm:{{ spmText }}</span>
+    <div data-spm="bb">
+      <button data-spm="cc">Click it</button>
     </div>
-    <div data-spmb="dd">
-      <button data-spmc="ff">Click it</button>
+    <div data-spm="dd">
+      <button data-spm="ff">Click it</button>
     </div>
   </div>
 </template>
 
 <script>
-// TODO 利用事件代理实现一个简单的收集spm信息的方法，注意不是针对每一个按钮进行函数绑定。场景：考虑一下如果一个页面中有很多按钮，需要如何处理
+// TODO 利用事件代理实现一个简单的收集spm信息的方法，注意不是针对每一个按钮进行函数绑定。场景：
+//考虑一下如果一个页面中有很多按钮，需要如何处理
 export default {
-  name: 'HelloWorld',
-  data: ()=>{
+  name: "HelloWorld",
+  data: () => {
     return {
-      spmText: 'xx.xx.xx'
-    }
-  }
-}
+      spmText: "xx.xx.xx",
+    };
+  },
+  methods: {
+    collectInfo(e) {
+      let result = "";
+      let root = e.currentTarget;
+      let temp = e.target;
+      let rootSpm = root.dataset.spm;
+
+      while (temp !== root) {
+        if (temp && temp.dataset && temp.dataset.spm) {
+          result = temp.dataset.spm + (result ? "." + result : result);
+        }
+        temp = temp.parentNode;
+      }
+      this.spmText = result ? rootSpm + "." + result : rootSpm;
+    },
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
