12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style type="text/css">
- div {
- float: left;
- height: 300px;
- width: 400px;
- margin: 0;
- background-color: orange;
- }
- span {
- display: block;
- text-align: center;
- height: 50%;
- width: 50%;
- margin: 75px 25% 75px 25%;
- padding: 10%;
- box-sizing: border-box;
- background-color: lightsteelblue;
- }
- p {
- float: left;
- height: 300px;
- width: 400px;
- margin: 0;
- background-color: chartreuse;
- }
- </style>
- <script src="jquery.js"></script>
- <script>
- function notify(e) {
- var current = e.currentTarget;
- var target = e.target;
- var join = Array.prototype.join;
- // Element.classList is not an Array but just an Object
- var currentClasses = join.call(current.classList || [], ' ');
- var targetClasses = join.call(target.classList || [], ' ');
- console.log(current.tagName, currentClasses, 'from', target.tagName, targetClasses);
- // Vanilla JS:
- // e = e || window.event; // Needed for IE, which does not pass the event to handlers.
- // var target = e.target || e.srcElement; // srcElement for IE, target for every other browser,
- // // Defeat Safari bug: if an event takes place on an element that contains
- // // text, this text node, and not the element, becomes the target of the
- // // event. Therefore we check if the target's nodeType is 3, a text node.
- // // If it is we move to its parent node, the HTML element.
- // if (target.nodeType == 3) {
- // target = target.parentNode;
- // }
- // console.log(e, target.tagName, target.classList, target.nodeType);
- }
- $(function () {
- $('body').find('*').click(notify);
- });
- </script>
- </head>
- <body>
- <div class="foo">
- Text
- <span class="bar">
- <a href="#">The quick brown fox jumps over the lazy dog.</a>
- </span>
- </div>
- <p>How razorback-jumping frogs can level six piqued gymnasts!</p>
- </body>
- </html>
|