浏览器默认行为

Yang2022年10月14日小于 1 分钟

描述

许多事件会自动触发浏览器执行某些行为，例如：

点击一个链接：触发导航（navigation）到该 URL
点击表单的提交按钮：触发提交到服务器的行为。
在文本上按下鼠标按钮并移动：选中文本

阻止默认行为

主流的方式是使用 event 对象，有一个 event.preventDefault() 方法
如果处理程序是使用 on<event>（而不是 addEventListener）分配的，那返回 false 也同样有效

event.defaultPrevented

如果默认行为被阻止，那么 event.defaultPrevented 属性为 true，否则为 false

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <button id="elem1">Element1</button>
    <button id="elem2">Element2</button>

    <script>
      elem1.oncontextmenu = function(event) {
        event.preventDefault()
        console.log('Element 1 Click')
      };
      elem2.oncontextmenu = function(event) {
        console.log('Element 2 Click')
      };

      document.oncontextmenu = function(event) {
        console.log(event.defaultPrevented)
      };
    </script>
  </body>
</html>