Question

jQuery 是否可以在鼠标下载 & amp; 鼠标启动后防止同一元素上的点击事件被执行。

如有任何帮助/实例,将不胜感激。

Answer 1

似乎还没有人回答这个问题,至少不是优雅的方式,所以我想我会分享纽贝德耶夫(资料来源:https://newbedev.com/cancel-kick-event-in-the-mouseup-event-handler )找到的解决方案。

答案是使用捕捉阶段, 所以在事件触发到你的元素之前, 所有父母都会在所谓的“捕捉阶段”得到它。在那之后, 事件被传送到你的元素上, 由父母跟随, 在所谓的“捕捉阶段 ” 。

这里的解决方案就是在捕捉阶段取消顶部的事件这样它就不会达到你的元素在泡泡阶段。

我的用法是一个滑动器, 所以我使用的代码设计出像这样的东西:

slider.addEventListener( mousedown , ev => {
    // we start sliding (details omitted)

    function captureClick(e) {
        // we cancel the event and stop it from going further.
        // preventDefault() on its own should be enough for most cases
        // Your handler can also check e.defaultPrevented to know if preventDefault() was called
        e.preventDefault();
        // e.stopPropagation();
    }

   window.addEventListener( click , captureClick, true);
   document.addEventListener( mouseup , e => {
       // cleanup - we wait an extra frame to remove our capture 
       //           in case the click event is delayed
       requestAnimationFrame(() => {
           window.removeEventListener( click , captureClick, true);
       });
   });
});

Answer 2

存在一种尴尬的方法,即当鼠标下载时禁用按钮,并在一个短时间段(如100米)后启用它。如果鼠标在这一时期出现,单击不会被启动。

$( #btn ).on( click , function() {
  alert( clicked )
});
$( #btn ).on( mousedown , function() {
  var btn = $(this);
  btn.attr( disabled ,  disabled );
  setTimeout(function() { btn.removeAttr( disabled ); }, 100);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<button id= btn >Click me</button>
</body>

Answer 3

在 Chrome 和 Internet Explorer 中, 而不是 Firefox 中, 在鼠标下载或鼠标上解析和重新匹配元素将会防止点击事件被触发。在 Internet Explorer 中, 这个把戏不会吸引双击( 在 Chrome 中它会) 。

但是,我不会依赖这种奇怪的行为,因为谁知道它是否会在某个时候改变。还有,要小心,分解和重新连接也会对分离元素的子孙产生副作用(irames reload, file field reset,...) 。

Answer 4

有一个解决办法:

const COORDS = {
  xDown: null,
  xUp: null
}

const handleOnMouseDown = e => {
  e.preventDefault()
  COORDS.xUp = null
  COORDS.xDown = e.clientX
}

const handleMouseUp = e => {
  e.preventDefault()
  COORDS.xUp = e.clientX
}

const handleOnClick = e => {
  if (COORDS.xDown !== COORDS.xUp) {
    e.preventDefault()
    console.log( drag )
  } else {
    console.log( click )
  }
}

const el = document.getElementById( test )

el.addEventListener( mousedown , handleOnMouseDown)
el.addEventListener( mouseup , handleMouseUp)
el.addEventListener( click , handleOnClick)

#test {
  padding: 20px;
  display: block; 
  background: #ccc
}

<a href="#" id="test">Link</a>

友情链接