[bugfix] Cell: 修复 cell 点击事情触发两次的问题 (#259)

* 修复cell重复触发点击事件的问题

* 增加示例代码

example/pages/cell/index.js

@@ -16,5 +16,9 @@ Page(Object.assign({}, Zan.Switch, {
     this.setData({
       checked: e.checked
     });
+  },
+
+  handleTap() {
+    console.log('cell tapped');
   }
 }));

example/pages/cell/index.wxml

@@ -1,7 +1,7 @@
 <doc-page title="CELL" without-padding>
 
   <zan-panel class="cell-panel-demo">
-    <zan-cell title="单行列表"></zan-cell>
+    <zan-cell title="单行列表" bindtap="handleTap"></zan-cell>
   </zan-panel>
 
   <zan-panel class="cell-panel-demo">
@@ -23,14 +23,25 @@
   </zan-panel>
 
   <zan-panel class="cell-panel-demo">
-    <zan-cell title="跳转到首页" is-link url="/pages/dashboard/index"></zan-cell>
+    <zan-cell
+      title="跳转到首页"
+      is-link
+      url="/pages/dashboard/index"
+      bindtap="handleTap"
+    ></zan-cell>
   </zan-panel>
 
   <zan-panel class="cell-panel-demo" title="cell 组">
     <zan-cell-group>
       <zan-cell title="只显示箭头" is-link></zan-cell>
       <zan-cell title="跳转到首页" is-link url="/pages/dashboard/index"></zan-cell>
-      <zan-cell title="只有 footer 点击有效" is-link url="/pages/dashboard/index" only-tap-footer></zan-cell>
+      <zan-cell
+        is-link
+        only-tap-footer
+        url="/pages/dashboard/index"
+        title="只有 footer 点击有效"
+        bindtap="handleTap"
+      ></zan-cell>
       <block wx:if="{{ show }}">
         <zan-cell title="单行列表" label="附加描述" value="详细信息"></zan-cell>
         <zan-cell title="表单">

package-lock.json

@@ -462,6 +462,16 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "aria-query": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-0.7.1.tgz",
+      "integrity": "sha1-Jsu1r/ZBRLCoJb4YRuCxbPoAsR4=",
+      "dev": true,
+      "requires": {
+        "ast-types-flow": "0.0.7",
+        "commander": "^2.11.0"
+      }
+    },
     "arr-diff": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -603,6 +613,12 @@
       "integrity": "sha512-XA5o5dsNw8MhyW0Q7MWXJWc4oOzZKbdsEJq45h7c8q/d9DwWZ5F2ugUc1PuMLPGsUnphCt/cNDHu8JeBbxf1qA==",
       "dev": true
     },
+    "ast-types-flow": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
+      "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=",
+      "dev": true
+    },
     "astral-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
@@ -723,6 +739,15 @@
       "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=",
       "dev": true
     },
+    "axobject-query": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-0.1.0.tgz",
+      "integrity": "sha1-YvWdvFnJ+SQnWco0mWDnov48NsA=",
+      "dev": true,
+      "requires": {
+        "ast-types-flow": "0.0.7"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -3400,6 +3425,12 @@
         "es5-ext": "^0.10.9"
       }
     },
+    "damerau-levenshtein": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz",
+      "integrity": "sha1-AxkcQyy27qFou3fzpV/9zLiXhRQ=",
+      "dev": true
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -3902,6 +3933,12 @@
         "minimalistic-crypto-utils": "^1.0.0"
       }
     },
+    "emoji-regex": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-6.5.1.tgz",
+      "integrity": "sha512-PAHp6TxrCy7MGMFidro8uikr+zlJJKJ/Q6mm2ExZ7HwkyR9lSVFfE3kt36qcwa24BQL7y0G9axycGjK1A/0uNQ==",
+      "dev": true
+    },
     "emojis-list": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
@@ -4405,6 +4442,21 @@
         }
       }
     },
+    "eslint-plugin-jsx-a11y": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.0.3.tgz",
+      "integrity": "sha1-VFg9GuRCSDFi4EDhPMMYZUZRAOU=",
+      "dev": true,
+      "requires": {
+        "aria-query": "^0.7.0",
+        "array-includes": "^3.0.3",
+        "ast-types-flow": "0.0.7",
+        "axobject-query": "^0.1.0",
+        "damerau-levenshtein": "^1.0.0",
+        "emoji-regex": "^6.1.0",
+        "jsx-ast-utils": "^2.0.0"
+      }
+    },
     "eslint-plugin-node": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-node/-/eslint-plugin-node-5.2.1.tgz",
@@ -9183,6 +9235,15 @@
         "verror": "1.10.0"
       }
     },
+    "jsx-ast-utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz",
+      "integrity": "sha1-6AGxs5mF4g//yHtA43SAgOLcrH8=",
+      "dev": true,
+      "requires": {
+        "array-includes": "^3.0.3"
+      }
+    },
     "kew": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/kew/-/kew-0.7.0.tgz",

packages/cell/index.js

@@ -48,29 +48,24 @@ Component({
     isLastCell: true
   },
   methods: {
-    navigateTo() {
+    footerTap() {
-      const { url = '' } = this.data;
+      // 如果并没有设置只点击 footer 生效，那就不需要额外处理。cell 上有事件会自动处理
-      const type = typeof this.data.isLink;
+      if (!this.data.onlyTapFooter) {
+        return;
+      }
 
       this.triggerEvent('tap', {});
-
+      doNavigate.call(this);
-      if (!this.data.isLink || !url || url === 'true' || url === 'false') return;
-
-      if (type !== 'boolean' && type !== 'string') {
-        warn('isLink 属性值必须是一个字符串或布尔值', this.data.isLink);
-        return;
-      }
-
-      if (['navigateTo', 'redirectTo', 'switchTab', 'reLaunch'].indexOf(this.data.linkType) === -1) {
-        warn('linkType 属性可选值为 navigateTo，redirectTo，switchTab，reLaunch', this.data.linkType);
-        return;
-      }
-      wx[this.data.linkType].call(wx, { url });
     },
+
     cellTap() {
-      if (!this.data.onlyTapFooter) {
+      // 如果只点击 footer 生效，那就不需要在 cell 根节点上处理
-        this.navigateTo();
+      if (this.data.onlyTapFooter) {
+        return;
       }
+
+      this.triggerEvent('tap', {});
+      doNavigate.call(this);
     },
 
     // 用于被 cell-group 更新，标志是否是最后一个 cell
@@ -79,3 +74,22 @@ Component({
     }
   }
 });
+
+// 处理跳转
+function doNavigate() {
+  const { url = '' } = this.data;
+  const type = typeof this.data.isLink;
+
+  if (!this.data.isLink || !url || url === 'true' || url === 'false') return;
+
+  if (type !== 'boolean' && type !== 'string') {
+    warn('isLink 属性值必须是一个字符串或布尔值', this.data.isLink);
+    return;
+  }
+
+  if (['navigateTo', 'redirectTo', 'switchTab', 'reLaunch'].indexOf(this.data.linkType) === -1) {
+    warn('linkType 属性可选值为 navigateTo，redirectTo，switchTab，reLaunch', this.data.linkType);
+    return;
+  }
+  wx[this.data.linkType].call(wx, { url });
+}

packages/cell/index.wxml

@@ -1,5 +1,5 @@
 <view 
-  bindtap="cellTap"
+  catchtap="cellTap"
   class="zan-cell {{ isLastCell ? 'last-cell' : '' }} {{ isLink ? 'zan-cell--access' : '' }}">
 
   <view class="zan-cell__icon">
@@ -12,7 +12,7 @@
     <slot></slot>
   </view>
 
-  <view catchtap="navigateTo" class="zan-cell__ft">
+  <view bindtap="footerTap" class="zan-cell__ft">
     <block wx:if="{{value}}">{{ value }}</block>
     <block wx:else>
       <slot name="footer"></slot>