click 和 blur 的事件顺序冲突

最新推荐文章于 2024-05-21 11:41:36 发布

_Rookie._

最新推荐文章于 2024-05-21 11:41:36 发布

阅读量485

点赞数 9

分类专栏： js 文章标签：前端

本文链接：https://blog.csdn.net/gu2022_3_5_21_23/article/details/135434188

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章讨论了在HTML表单中，如何通过将清空按钮的事件从click改为mousedown或ontouchstart来防止输入框在点击时立即失去焦点。通过这种方法，可以保持按钮可见并实现预期的清空功能。

摘要由CSDN通过智能技术生成

问题：输入框后有个情况按钮，点击内容清空，按钮消失。输入框blur 按钮也消失。造成点击按钮内容不动，按钮先消失。原因：先执行的blur。click改为 mousedown 或 ontouchstar

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        position: relative;
        display: inline-block;
      }

      .ipt {
        width: 200px;
        height: 30px;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 0 10px;
        padding-right: 30px;
        position: relative;
        /* outline: rgb(186, 18, 127); */
      }
      .ipt:focus {
        outline: 2px solid red; /* 修改获取焦点时的轮廓颜色为红色 */
      }
      .active::after {
        display: block;
      }
      .clear-ipt {
        width: 30px;
        height: 30px;
        position: absolute;
        right: 0;
        top: 0;
        text-align: center;
        line-height: 30px;
        display: none;
        z-index: 10;
        cursor: pointer;
      }
      .out {
        margin: 20px 0;
      }
    </style>
  </head>
  <body>
    <div class="out">
      <span>姓名</span>
      <input type="text" class="ipt" />
      <div class="clear-ipt">X</div>
    </div>
    <div class="out">
      <span>姓名</span>
      <input type="text" class="ipt" />
      <div class="clear-ipt">X</div>
    </div>
    <div class="out">
      <span>姓名</span>
      <input type="text" class="ipt" />
      <div class="clear-ipt">X</div>
    </div>
  </body>
</html>
<script>
  let clearIpt = document.querySelectorAll('.clear-ipt');
  let ipt = document.querySelectorAll('.ipt');
  ipt.forEach((item, index) => {
    item.onfocus = () => {
      if (item.value) {
        clearIpt[index].style.display = 'block';
      }
    };
    item.oninput = () => {
      if (item.value) {
        clearIpt[index].style.display = 'block';
      }
    };
    item.onblur = () => {
      clearIpt[index].style.display = 'none';
    };
     /** 阻止事件冒泡 保持focus */
      /**
       * 通过将清空按钮的事件处理程序设置为 onmousedown | ontouchstart 而不是 onclick，我们可以在更早的阶段捕获到鼠标按下的事件。默认情况下，点击输入框会导致输入框失去焦点，并触发 blur 事件，从而隐藏清空按钮。但是，通过在 mousedown 事件处理程序中返回 false，我们可以阻止后续的鼠标事件和默认行为，即输入框失去焦点。因此，使用 onmousedown 事件处理程序并返回 false 可以有效地阻止输入框在点击清空按钮时触发 blur 事件，从而实现清空按钮功能而不隐藏。
       * 当鼠标在页面上执行操作时，会触发多种不同类型的事件，这些事件的触发顺序通常如下：
          mousedown：鼠标按钮被按下。
          mouseup：鼠标按钮被释放。
          click：鼠标按钮被按下并释放（这是一个组合事件，等效于 mousedown + mouseup）。
          mouseover：鼠标指针移入元素。
          mouseout：鼠标指针移出元素。
          mousemove：鼠标指针在元素内部移动。
       */
    clearIpt[index].ontouchstart = () => {
      item.value = '';
      clearIpt[index].style.display = 'none';
      return false;
    };
    clearIpt[index].onmousedown = () => {
      item.value = '';
      clearIpt[index].style.display = 'none';
      return false;
    };
  });
</script>

_Rookie._

关注

9
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
click 和 blur 的事件顺序冲突

问题：输入框后有个情况按钮，点击内容清空，按钮消失。输入框blur 按钮也消失。造成点击按钮内容不动，按钮先消失。原因：先执行的blur。click改为 mousedown 或 ontouchstar。
复制链接

扫一扫

专栏目录