LayoutTests/fast/events/capture-on-target.html - WebKit - Git at Google

 <html>
 <head>
 <script>

 if (window.testRunner) {
     testRunner.dumpAsText();
     testRunner.waitUntilDone();
 }
 function test()
 {
     document.getElementById("target").addEventListener("click", targetClick, true);

     if (window.eventSender) {
         eventSender.mouseMoveTo(52, 52);
         eventSender.mouseDown();
         eventSender.mouseUp();
 	window.setTimeout(finish, 0);
     }
 }

 var finished = false;
 function finish()
 {
     if (finished)
         return;
     finished = true;
     log("targetClickFired: " + targetClickFired);
     log("containerClickFired: " + containerClickFired);
     if (targetClickFired && !containerClickFired)
         log("test passed");
     else
         log("test failed");
     if (window.testRunner)
         testRunner.notifyDone();
 }

 function log(text) {
     document.getElementById("result").innerHTML = document.getElementById("result").innerHTML + text + "<br>";
 }

 var targetClickFired = false;
 var containerClickFired = false;

 function targetClick(e) {
     window.setTimeout(finish, 0);
     targetClickFired = true;
     e.stopPropagation();
     e.preventDefault();
 };

 function containerClick(e) {
     window.setTimeout(finish, 0);
     containerClickFired = true;
 };

 </script>

 </head>
 <body onload="test()">

     <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>
     <div onclick="containerClick(event)">
         <div style="position:absolute; top: 40; left: 40; width: 100; height: 40; background-color: pink" id="target" onclick="targetClick(event)">Click here</a>
     </div>

     <div id="result" style="position: absolute; top: 100; left: 50;"><br></div>
 </body>
 </html>
	<html>
	<head>
	<script>

	if (window.testRunner) {
	testRunner.dumpAsText();
	testRunner.waitUntilDone();
	}
	function test()
	{
	document.getElementById("target").addEventListener("click", targetClick, true);

	if (window.eventSender) {
	eventSender.mouseMoveTo(52, 52);
	eventSender.mouseDown();
	eventSender.mouseUp();
	window.setTimeout(finish, 0);
	}
	}

	var finished = false;
	function finish()
	{
	if (finished)
	return;
	finished = true;
	log("targetClickFired: " + targetClickFired);
	log("containerClickFired: " + containerClickFired);
	if (targetClickFired && !containerClickFired)
	log("test passed");
	else
	log("test failed");
	if (window.testRunner)
	testRunner.notifyDone();
	}

	function log(text) {
	document.getElementById("result").innerHTML = document.getElementById("result").innerHTML + text + "<br>";
	}

	var targetClickFired = false;
	var containerClickFired = false;

	function targetClick(e) {
	window.setTimeout(finish, 0);
	targetClickFired = true;
	e.stopPropagation();
	e.preventDefault();
	};

	function containerClick(e) {
	window.setTimeout(finish, 0);
	containerClickFired = true;
	};

	</script>

	</head>
	<body onload="test()">

	<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>
	<div onclick="containerClick(event)">
	<div style="position:absolute; top: 40; left: 40; width: 100; height: 40; background-color: pink" id="target" onclick="targetClick(event)">Click here</a>
	</div>

	<div id="result" style="position: absolute; top: 100; left: 50;"><br></div>
	</body>
	</html>