zoukankan      html  css  js  c++  java
  • 冒泡和默认事件

     1 <!DOCTYPE html>
     2 <html lang="zh">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>冒泡和默认事件</title>
     6     <style type="text/css">
     7         .sub {
     8             width: 100px;
     9             height: 100px;
    10             background-color: red;
    11             position: absolute;
    12             top: 50px;
    13             left: 50px;
    14         }
    15         .sup {
    16             width: 200px;
    17             height: 200px;
    18             background-color: orange;
    19             margin: 50px auto;
    20             position: relative;
    21         }
    22         body {
    23             border: 1px solid black;
    24         }
    25     </style>
    26 </head>
    27 <body>
    28     <div class="sup">
    29         <div class="sub">12345</div>
    30     </div>
    31 </body>
    32 <script type="text/javascript">
    33     var sub = document.querySelector('.sub');
    34     var sup = document.querySelector('.sup');
    35     var body = document.querySelector('body');
    36     sub.onclick = function (ev) {
    37         ev.stopPropagation();
    38         console.log('sub click');
    39     };
    40     sup.onclick = function (ev) {
    41         ev.cancelBubble = true;
    42         console.log('sup click');
    43     };
    44     body.onclick = function (ev) {
    45         console.log(ev)
    46         console.log('body click');
    47     };
    48     sub.oncontextmenu = function (ev) {
    49         ev.cancelBubble = true;
    50         console.log('sub menu click');
    51         return false;
    52     };
    53     sup.oncontextmenu = function (ev) {
    54         ev.preventDefault();
    55         console.log('sup menu click');
    56     }
    57 </script>
    58 </html>
  • 相关阅读:
    hud 1166 敌兵布阵
    zznu 1914 asd的甩锅计划
    poj 1860 Currency Exchange
    poj 3026 Borg Maze (BFS + Prim)
    poj 2349 Arctic Network
    POJ 1502 MPI Maelstrom
    poj 1308 Is It A Tree?
    hdu 1272 小希的迷宫
    poj 1679 http://poj.org/problem?id=1679
    POJ 2492 A Bug's Life
  • 原文地址:https://www.cnblogs.com/xuqidong/p/12112127.html
Copyright © 2011-2022 走看看