JavaScript 阻止默认事件 默认行为

默认行为

• 默认行为，就是不用我们注册，它自己就存在的事情

  • 比如我们点击鼠标右键的时候，会自动弹出一个菜单
  • 比如我们点击 a 标签的时候，我们不需要注册点击事件，他自己就会跳转页面
  • ...

• 这些不需要我们注册就能实现的事情，我们叫做 默认事件

阻止默认行为

• 有的时候，我们不希望浏览器执行默认事件

  • 比如我给 a 标签绑定了一个点击事件，我点击你的时候希望你能告诉我你的地址是什么
  • 而不是直接跳转链接
  • 那么我们就要把 a 标签原先的默认事件阻止，不让他执行默认事件

• 我们有两个方法来阻止默认事件

  • e.preventDefault() : 非 IE 使用
  • e.returnValue = false ：IE 使用

• 我们阻止默认事件的时候也要写一个兼容的写法

  <a href="https://www.baidu.com">点击我试试</a>
  <script>
   var oA = document.querySelector('a')
    
    a.addEventListener('click', function (e) {
      e = e || window.event
      
      console.log(this.href)
      
      e.preventDefault ? e.preventDefault() : e.returnValue = false
    })
  </script>
  

  • 这样写完以后，你点击 a 标签的时候，就不会跳转链接了
  • 而是会在控制台打印出 a 标签的 href 属性的值