焦点事件和点击事件重叠，如何都执行

一、点击按钮不失去焦点

<body>
  <input type="text" autofocus="autofocus">
  <button>点击按钮不会失去焦点</button>

  <script>
    var btn = document.querySelector('button')
    btn.onmousedown = (event) => {
      event.preventDefault() // 点击按钮不会失去焦点（阻止默认）
    }
  </script>
</body>

在这里插入图片描述

二、点击按钮，失去焦点事件和点击事件都执行

思路：事件永远不能同时进行，因为js本身就是单线程，所以两个事件同时进行谁的优先级大，那就执行谁，因此我们只能手动设置先后，才能做到两个事件都执行。

（js方式）

<body>
  <input type="text" autofocus="autofocus">
  <button>点击按钮不会失去焦点</button>

  <script>
    var btn = document.querySelector('button')
    var input = document.querySelector('input')
    /*
      js添加事件总结：
        1.通过点击事件
          btn.onclick = function(){}
        2.监听点击事件
          btn.addEventListener('click', function(){})
        3.直接通过方法响应事件
          <button id="btn" οnclick="threeFn()">点我</button>
          function threeFn(){}
    */
    btn.onmousedown = () => {
      input.addEventListener("blur", () => {
        console.log('失去焦点')
      }, { once: true }), // once 只调用一次
        btn.onclick = () => { 
          setTimeout(() => {
            console.log('点击事件')
          }, 100)
        }
    }
  </script>
</body>

在这里插入图片描述

备注：once: Boolean，表示 listener 在添加之后最多只调用一次。如果是 true， listener 会在其被调用之后自动移除。
详细说明查看js文档：https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener
在这里插入图片描述

（jq方式）相对简单但是不要忘了映入JQ

<body>
  <input type="text" autofocus="autofocus">
  <!-- autofocus 进入页面，自动获取焦点 -->
  <button>点击按钮不会失去焦点</button>

  <script>
    $(() => {
      $('input').on('blur', () => { // 监听失去焦点事件
        setTimeout(() => {
          console.log('失去焦点事件')
        }, 200)
      })
      $('button').click(() => {
        console.log('点击事件')
      })
    })

  </script>
</body>

在这里插入图片描述

posted @ 2022-12-06 22:19  轻风细雨_林木木  阅读(24)  评论(0)  编辑  收藏  举报