zoukankan      html  css  js  c++  java
  • JS之onsubmit事件与阻止事件外延

    onsubmit事件:

    1、return false  

    2、event.preventDefault()适用于onsubmit

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>


    <form action="" id="form1">
    <input type="text" name="username">
    <input type="submit" value="submit">
    </form>


    <script>
    var ele = document.getElementById("form1");

    ele.onsubmit = function (event) {
    alert(123);
    // return false //方式一:返回false
    event.preventDefault();//方式一:通过DOM Event(事件)调用preventDefault() =>通知浏览器不要执行与事件关联的默认动作。
    }
    </script>

    </body>
    </html>












    阻止事件传播stopPropagation()




    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>

    <style>
    .outer{
    300px;
    height: 300px;
    background-color: red;
    }


    .inner{
    100px;
    height: 100px;
    background-color: #2459a2;
    }

    </style>

    <body>

    <div class="outer">
    <div class="inner"> </div>
    </div>


    <script>
    var outer_ele=document.getElementsByClassName("outer")[0];
    var inner_ele=document.getElementsByClassName("inner")[0];
    outer_ele.onclick=function () {
    alert("outer")
    }
    //通过调用event事件(e为形式参数),阻止事件传播stopPropagation()
    inner_ele.onclick=function (e) {
    alert("inner")
    e.stopPropagation()
    }

    </script>


    </body>
    </html>
  • 相关阅读:
    数据库基础(2)
    数据库基础
    多线程(3)
    多线程(2)
    多线程(1)
    并发编程(3)
    软件工程——个人总结
    软件工程第二次作业-结对编程
    软件工程第二次作业——结对编程心得体会
    软件工程第一次作业补充
  • 原文地址:https://www.cnblogs.com/hhqdsj/p/13285078.html
Copyright © 2011-2022 走看看