• 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>
  • 相关阅读:
    260.java风格简介
    259.Java标识符和注释
    258.计算机网络的性能指标
    257.计算机网络的组成
    256.常见的网络拓扑结构
    HDFS文件的读写流程入门学习
    Servlet入门
    Linux下扩展根分区-非LVM
    Tomcat基本使用
    JDBC入门
  • 原文地址:https://www.cnblogs.com/hhqdsj/p/13285078.html
Copyright © 2020-2023  润新知