Don't block clicks just because they happen in shadowroot scopes

The previous strategy for ghostclick prevention did not work across shadowdom boundaries Now the event path of the click is checked to see if it is a ghost click, or a click into a shadowroot
googlearchive · Nov 12, 2014 · 94660a5 · 94660a5
1 parent 2b22c2b
commit 94660a5
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 42 deletions.
diff --git a/src/touch.js b/src/touch.js
@@ -323,9 +323,15 @@
     };
     // if click coordinates are close to touch coordinates, assume the click came from a touch
     var wasTouched = scope.mouseEvents.lastTouches.some(closeTo);
-    // if the click came from touch, and the click target is not the same as the touchstart target, then the touchstart
-    // target was probably removed, and the click should be "busted"
-    if (wasTouched && (ev.target !== touchEvents.firstTarget)) {
+    // if the click came from touch, and the touchstart target is not in the path of the click event,
+    // then the touchstart target was probably removed, and the click should be "busted"
+    var path = scope.targetFinding.path(ev);
+    if (wasTouched) {
+      for (var i = 0; i < path.length; i++) {
+        if (path[i] === touchEvents.firstTarget) {
+          return;
+        }
+      }
       ev.preventDefault();
       STOP_PROP_FN.call(ev);
     }

diff --git a/test/html/ghostclick.html b/test/html/ghostclick.html
@@ -8,59 +8,126 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Ghostclick</title>
-  <script src="../../polymer-gestures.js"></script>
-  <style>
-    #box {
-      height: 200px;
-      width: 200px;
-      background: gray;
-    }
-    #result {
-      z-index: 1;
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background: red;
-    }
-    #result.fail {
-      background: red;
-    }
-    #result.pass{
-      background: green;
-    }
-  </style>
-</head>
-<body>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
+    <title>Ghostclick</title>
+    <script src="../../../webcomponentsjs/webcomponents.js"></script>
+    <script src="../../polymer-gestures.js"></script>
+    <style>
+      #result {
+        height: 200px;
+        width: 200px;
+        background: green;
+      }
+      #result.fail {
+        background: red;
+      }
+      pre {
+        white-space: pre-wrap;
+      }
+      label {
+        display: inline-flex;
+        justify-content: middle;
+      }
+      label > input {
+        padding-left: 20px;
+      }
+    </style>
+  </head>
+  <body onclick="">
   <pre>Tap the gray box with touch. If the screen turns green, the test passed. If it turns red, the test failed.</pre>
-  <div id="box" onclick=""></div>
+  <label>Remove? <input id="remove" type="checkbox"></label>
+
+  <br>
+  <br>
+
+  <div id="container"></div>
+  <template>
+    <style>
+      a {
+        opacity: 1;
+        width: 100%;
+        height: 200px;
+        box-sizing: border-box;
+        text-decoration: none;
+        transform: translate3d(0, 0, 0);
+        display: flex;
+        display: -webkit-flex;
+      }
+    </style>
+    <a href="#">
+      <div id="box" style="height:200px; width:200px; background: gray;" onclick=""></div>
+    </a>
+  </template>
+  <pre id="output"></pre>
   <script>
-    result = document.createElement('div');
+    var result = document.createElement('div');
     result.id = 'result';
 
-    function pass() {
-      document.body.appendChild(result);
-      result.className = 'pass';
+    function test() {
+      if (!result.parentNode) {
+        document.body.appendChild(result);
+      }
     }
+
     function fail() {
+      test();
       result.className = 'fail';
     }
+    window.addEventListener('error', fail);
+
+    var output = document.getElementById('output');
+    function log(s) {
+      output.textContent += s + '\n';
+    }
+
+    var remove = document.getElementById('remove');
+    remove.addEventListener('click', function(ev) {
+      ev.stopPropagation();
+    });
 
     pgae = PolymerGestures.addEventListener.bind(PolymerGestures);
-    var fg = document.getElementById('box');
+
+    var container = document.getElementById('container');
+    var template = document.querySelector('template');
+
+    var sr = container.createShadowRoot();
+    sr.appendChild(template.content.cloneNode(true));
+
+    var box = sr.getElementById('box');
+    var a = box.parentNode;
+
+    var wasClicked = false;
+
+    pgae(a, 'click', function() {
+      log('a click');
+      wasClicked = true;
+    });
 
     pgae(document.body, 'click', function() {
-      console.error('ghostclick');
-      fail();
+      log('body click');
+      if (!box.parentNode) {
+        fail();
+      }
+    });
+
+    pgae(box, 'tap', function() {
+      log('box tap, remove');
+      if (remove.checked) {
+        box.parentNode.removeChild(box);
+      }
     });
 
-    pgae(box, 'tap', function(ev) {
-      document.body.removeChild(box);
-      pass();
+    pgae(a, 'tap', function(ev) {
+      log('a tap');
+      setTimeout(function() {
+        if (!wasClicked && box.parentNode) {
+          fail();
+        } else {
+          test();
+        }
+      }, 1000);
     });
   </script>
 </body>