代码之家  ›  专栏  ›  技术社区  ›  Xyz

当检测到pointermove时,不会为链接上的鼠标操作触发pointerup事件

  •  0
  • Xyz  · 技术社区  · 6 年前

    我拿不到钥匙 pointerup A 标记为 href 属性集) event.pointerType == 'mouse' 如果鼠标在 pointerdown 指针 .

    我有以下场景:

    var lastEvent = false;
    var handler = function (e) {
      if (lastEvent != e.type) {
        e.target.innerHTML += e.type + ' with ' + e.pointerType + '<br/>';
        e.target.scrollTo(0, e.target.scrollHeight);
      }
      lastEvent = e.type;
    }
    document.querySelector('a').addEventListener('pointerdown', handler);
    document.querySelector('a').addEventListener('pointermove', handler);
    document.querySelector('a').addEventListener('pointerup', handler);
    div {
      height: 100vh;
      display: flex;
    }
    a {
      height: 60vh;
      width: 75vw;
      margin: auto;
      background-color: red;
      display: inline-block;
      user-select: none;
      touch-action: none;
      overflow-y: scroll;
    }
    <div>
        <a href="#"></a>
    </div>

    如果我按下一个鼠标按钮,按住它一段时间,然后松开它,我得到以下序列:

    1. 鼠标指针向下
    2. 鼠标指针

    但是,如果我按下鼠标按钮,保持按下并移动鼠标指针,然后释放它,我会得到以下序列:

    1. 鼠标指针向下
    2. 鼠标指针移动

    问题:pointerup从不开火。

    指针 事件,因为如果在 span 或删除 href公司

    1. 鼠标指针

    此外,它的工作完美无瑕的触摸驱动 PointerEvents :

    1. 触摸指针向下
    2. 指针触摸移动

    我想有一个聪明的css属性可以设置在元素上禁用它 指针 a { pointer-actions: click; }

    1 回复  |  直到 6 年前
        1
  •  1
  •   Xyz    6 年前

    哦!基本上,我在问题中陈述了答案。这是最重要的 拖曳作用 这阻止了 pointerup draggable="false" link元素的属性修复了这个问题。

    <a href="#" draggable="false"></a>
    

    概念证明:

    var lastEvent = false;
    var handler = function (e) {
      if (lastEvent != e.type) {
        e.target.innerHTML += e.type + ' with ' + e.pointerType + '<br/>';
        e.target.scrollTo(0, e.target.scrollHeight);
      }
      lastEvent = e.type;
    }
    document.querySelector('a').addEventListener('pointerdown', handler);
    document.querySelector('a').addEventListener('pointermove', handler);
    document.querySelector('a').addEventListener('pointerup', handler);
    div {
      height: 100vh;
      display: flex;
    }
    a {
      height: 60vh;
      width: 75vw;
      margin: auto;
      background-color: red;
      display: inline-block;
      user-select: none;
      touch-action: none;
      overflow-y: scroll;
    }
    <div>
        <a href="#" draggable="false"></a>
    </div>

    draggable 设置为 false mousedown - mousemove - mouseup 将触发 click 事件。但这可以通过检查 clientX clientY 之间 pointerdown 事件大于一定数量的像素,将其存储在变量中并添加 点击 运行的事件处理程序 e.preventDefault(); e.stopPropagation();