fix: should works on mobile

imcuttle · imcuttle · commit 5ed294483d8e · 2018-10-03T19:00:42.000+08:00
diff --git a/example.html b/example.html
@@ -2,6 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
     <title>Title</title>
     <style>
       body {
@@ -28,6 +29,8 @@
     </style>
 </head>
 <body>
+<script src="//cdn.jsdelivr.net/npm/eruda"></script>
+<script>eruda.init();</script>
   <div id="wrapper">
     <div id="rect"></div>
   </div>
diff --git a/example.js b/example.js
@@ -5,7 +5,7 @@
  *
  */
 
-import popup from './'
+import popup from './index'
 
 const span = document.createElement('span')
 span.textContent = '民主'
diff --git a/index.js b/index.js
@@ -18,10 +18,17 @@ function popup(popupList = [], node, { styleMapper = sty => sty, index = 0, from
     throw new Error('[click-popup] `popupList` should be an array which is not empty')
   }
 
+  const isSupportTouchStart = 'ontouchstart' in document.documentElement
+
   const clickHandler = evt => {
-    // const bodyRect = document.body.getBoundingClientRect()
-    let left = evt.pageX //- bodyRect.left
-    let top = evt.pageY - 3 //- bodyRect.top
+    let { pageX, pageY } = evt
+    if (evt.type === 'touchstart' && evt.touches && evt.touches[0]) {
+      pageX = evt.touches[0].pageX
+      pageY = evt.touches[0].pageY
+    }
+
+    let left = pageX //- bodyRect.left
+    let top = pageY - 3 //- bodyRect.top
 
     const span = document.createElement('span')
     const node = popupList[index++ % popupList.length]
@@ -54,11 +61,20 @@ function popup(popupList = [], node, { styleMapper = sty => sty, index = 0, from
       }
     })
   }
-  node.addEventListener('click', clickHandler, false)
 
-  return () => {
-    node.removeEventListener('click', clickHandler, false)
+  const eventName = isSupportTouchStart ? 'touchstart' : 'click'
+  node.addEventListener(eventName, clickHandler, false)
+  // node.addEventListener('touchstart', clickHandler, false)
+
+  const close = () => {
+    node.removeEventListener(eventName, clickHandler, false)
   }
+
+  if (module.hot && process.env.NODE_ENV !== 'production') {
+    module.hot.accept(['./'], close)
+  }
+
+  return close
 }
 
 export default popup
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "precommit": "pretty-quick --staged",
     "build": "babel index.js -o index.es5.js",
     "build:demo": "gojs -b example.js",
+    "demo": "gojs -i example.js -p 10000",
     "dev": "npm run build -- -w",
     "version": "npm run changelog",
     "commitmsg": "commitlint -e $GIT_PARAMS",

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`*`
`6`	`6`	`*/`
`7`	`7`
`8`		`-import popup from './'`
	`8`	`+import popup from './index'`
`9`	`9`
`10`	`10`	`const span = document.createElement('span')`
`11`	`11`	`span.textContent = '民主'`