✨ If a scrolling event occurs, the tap is not triggered.

zswang · Nov 23, 2016 · 84fa7de · 84fa7de
1 parent e6d80eb
commit 84fa7de
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 5 deletions.
diff --git a/bower.json b/bower.json
@@ -25,7 +25,7 @@
     "example",
     "tools"
   ],
-  "version": "0.0.3",
+  "version": "0.0.4",
   "keywords": [
     "event",
     "tap",

diff --git a/h5tap.js b/h5tap.js
@@ -5,8 +5,8 @@
    * Tap event trigger of mobile
    * @author
    *   zswang (http://weibo.com/zswang)
-   * @version 0.0.3
-   * @date 2016-11-22
+   * @version 0.0.4
+   * @date 2016-11-23
    */
   /*<function name="h5tap">*/
   /**
@@ -171,6 +171,40 @@
       // * done
     }, 5)
     ```
+   * @example h5tap():Scroll event
+    ```html
+    <div>
+       <button cmd="ok"></button>
+    </div>
+    ```
+    ```js
+    var count = 0;
+    h5tap('div', '[cmd]', function (target) {
+      count++;
+    });
+    var point = [100, 100];
+    var target = document.querySelector('[cmd="ok"]');
+    // ------ touchstart ------
+    var e = document.createEvent('UIEvent');
+    var point = [100, 100];
+    e.touches = [{pageX: point[0], pageY: point[1], clientX: point[0], clientY: point[1]}];
+    e.initUIEvent('touchstart', true, true, window, 1);
+    target.dispatchEvent(e);
+    // ------ scroll ------
+    var e = document.createEvent('UIEvent');
+    e.initUIEvent('scroll', true, true, window, 1);
+    window.dispatchEvent(e);
+    // ------ touchend ------
+    var e = document.createEvent('UIEvent');
+    e.changedTouches = [{pageX: point[0], pageY: point[1], clientX: point[0], clientY: point[1]}];
+    e.initUIEvent('touchend', true, true, window, 1);
+    target.dispatchEvent(e);
+    setTimeout(function () {
+      console.log(count);
+      // > 0
+      // * done
+    }, 5)
+    ```
    */
   function h5tap(parent, selector, callback) {
     if (typeof parent === 'string') {
@@ -224,6 +258,11 @@
     // 兼容 PC 端
     parent.addEventListener('mousedown', startHandler, false);
     document.addEventListener('mouseup', endHandler, false);
+    // 发生滚动则不触发
+    window.addEventListener('scroll', function() {
+      startPoint = null;
+      target = null;
+    });
   }
   /*</function>*/
   exports = h5tap;

diff --git a/h5tap.min.js b/h5tap.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "h5tap",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "h5tap.js",
   "description": "Tap event trigger of mobile",
   "repository": {

diff --git a/src/h5tap.js b/src/h5tap.js
@@ -207,6 +207,45 @@
       // * done
     }, 5)
     ```
+   * @example h5tap():Scroll event
+    ```html
+    <div>
+       <button cmd="ok"></button>
+    </div>
+    ```
+    ```js
+    var count = 0;
+    h5tap('div', '[cmd]', function (target) {
+      count++;
+    });
+
+    var point = [100, 100];
+    var target = document.querySelector('[cmd="ok"]');
+
+    // ------ touchstart ------
+    var e = document.createEvent('UIEvent');
+    var point = [100, 100];
+    e.touches = [{pageX: point[0], pageY: point[1], clientX: point[0], clientY: point[1]}];
+    e.initUIEvent('touchstart', true, true, window, 1);
+    target.dispatchEvent(e);
+
+    // ------ scroll ------
+    var e = document.createEvent('UIEvent');
+    e.initUIEvent('scroll', true, true, window, 1);
+    window.dispatchEvent(e);
+
+    // ------ touchend ------
+    var e = document.createEvent('UIEvent');
+    e.changedTouches = [{pageX: point[0], pageY: point[1], clientX: point[0], clientY: point[1]}];
+    e.initUIEvent('touchend', true, true, window, 1);
+    target.dispatchEvent(e);
+
+    setTimeout(function () {
+      console.log(count);
+      // > 0
+      // * done
+    }, 5)
+    ```
    */
   function h5tap(parent, selector, callback) {
 
@@ -265,6 +304,12 @@
     // 兼容 PC 端
     parent.addEventListener('mousedown', startHandler, false);
     document.addEventListener('mouseup', endHandler, false);
+
+    // 发生滚动则不触发
+    window.addEventListener('scroll', function() {
+      startPoint = null;
+      target = null;
+    });
   }
   /*</function>*/
 

diff --git a/test/h5tap.js b/test/h5tap.js
@@ -246,5 +246,60 @@ describe("src/h5tap.js", function () {
     }, 5)
   });
 
+  it("jsdom@h5tap():Scroll event", function (done) {
+    jsdom.env("    <div>\n       <button cmd=\"ok\"></button>\n    </div>", {
+        features: {
+          FetchExternalResources : ["script", "link"],
+          ProcessExternalResources: ["script"]
+        }
+      },
+      function (err, window) {
+        global.window = window;
+        ["document","navigator"].forEach(
+          function (key) {
+            global[key] = window[key];
+          }
+        );
+        assert.equal(err, null);
+        done();
+      }
+    );
+  });
+
+  it("h5tap():Scroll event", function (done) {
+    examplejs_printLines = [];
+    var count = 0;
+    h5tap('div', '[cmd]', function (target) {
+      count++;
+    });
+
+    var point = [100, 100];
+    var target = document.querySelector('[cmd="ok"]');
+
+    // ------ touchstart ------
+    var e = document.createEvent('UIEvent');
+    var point = [100, 100];
+    e.touches = [{pageX: point[0], pageY: point[1], clientX: point[0], clientY: point[1]}];
+    e.initUIEvent('touchstart', true, true, window, 1);
+    target.dispatchEvent(e);
+
+    // ------ scroll ------
+    var e = document.createEvent('UIEvent');
+    e.initUIEvent('scroll', true, true, window, 1);
+    window.dispatchEvent(e);
+
+    // ------ touchend ------
+    var e = document.createEvent('UIEvent');
+    e.changedTouches = [{pageX: point[0], pageY: point[1], clientX: point[0], clientY: point[1]}];
+    e.initUIEvent('touchend', true, true, window, 1);
+    target.dispatchEvent(e);
+
+    setTimeout(function () {
+      examplejs_print(count);
+      assert.equal(examplejs_printLines.join("\n"), "0"); examplejs_printLines = [];
+      done();
+    }, 5)
+  });
+
 });