LayoutTests/fast/events/capture-on-target.html

   1 <html>
   2 <head>
   3 <script>
   4
   5 if (window.testRunner) {
   6     testRunner.dumpAsText();
   7     testRunner.waitUntilDone();
   8 }
   9 function test()
  10 {
  11     document.getElementById("target").addEventListener("click", targetClick, true);
  12
  13     if (window.eventSender) {
  14         eventSender.mouseMoveTo(52, 52);
  15         eventSender.mouseDown();
  16         eventSender.mouseUp();
  17         window.setTimeout(finish, 0);
  18     }
  19 }
  20
  21 var finished = false;
  22 function finish()
  23 {
  24     if (finished)
  25         return;
  26     finished = true;
  27     log("targetClickFired: " + targetClickFired);
  28     log("containerClickFired: " + containerClickFired);
  29     if (targetClickFired && !containerClickFired)
  30         log("test passed");
  31     else
  32         log("test failed");
  33     if (window.testRunner)
  34         testRunner.notifyDone();
  35 }
  36
  37 function log(text) {
  38     document.getElementById("result").innerHTML = document.getElementById("result").innerHTML + text + "<br>";
  39 }
  40
  41 var targetClickFired = false;
  42 var containerClickFired = false;
  43
  44 function targetClick(e) {
  45     window.setTimeout(finish, 0);
  46     targetClickFired = true;
  47     e.stopPropagation();
  48     e.preventDefault();
  49 };
  50
  51 function containerClick(e) {
  52     window.setTimeout(finish, 0);
  53     containerClickFired = true;
  54 };
  55
  56 </script>
  57
  58 </head>
  59 <body onload="test()">
  60
  61     <p>This tests checks that capturing event handlers trigger on the node that is the target of the event, and that stopPropagation in such a handler prevents further bubble handlers from triggering.</p>
  62     <div onclick="containerClick(event)">
  63         <div style="position:absolute; top: 40; left: 40; width: 100; height: 40; background-color: pink" id="target" onclick="targetClick(event)">Click here</a>
  64     </div>
  65
  66     <div id="result" style="position: absolute; top: 100; left: 50;"><br></div>
  67 </body>
  68 </html>