Blogger Information
Blog 28
fans 0
comment 0
visits 11584
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
禁用表单默认提交的三种方式,实例演示this.target,currentTarget的区别与联系
子墨吖ฅฅ
Original
377 people have browsed it
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>Document</title>
  9. </head>
  10. <body>
  11. <!--第一种禁用方法,给一个onsubmit事件禁用-->
  12. <form action="login.php" method="post" id="login" onsubmit="return false">
  13. <label class="title">用户登录</label>
  14. <label for="email">邮箱:</label>
  15. <input type="email" id="email" name="email" value="" autofocus />
  16. <label for="password">密码:</label>
  17. <input type="password" id="password" name="password" />
  18. <!-- 第二种禁用方法将button的submit值改为button -->
  19. <button name="submit" type="button">登录</button>
  20. </form>
  21. <ul id="ul_id">
  22. <li>item1</li>
  23. <li>item2</li>
  24. <li>item3</li>
  25. <li>item4</li>
  26. <li>item5</li>
  27. </ul>
  28. <script>
  29. document.forms.login.submit.onclick = function (ev) {
  30. // 禁用默认提交行为
  31. ev.preventDefault();
  32. }
  33. ul_id.addEventListener("click",(e)=>{
  34. console.log(e.target) // 指向触发事件的元素
  35. console.log(e.currentTarget) // 绑定事件的元素
  36. })
  37. </script>
  38. </body>
  39. </html>
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post