10

在刚刚触发 mousedown 和 mouseup 事件之后，jQuery 是否可以防止执行同一元素上的单击事件。

任何帮助/示例将不胜感激。

4

4 回答 4

2

有一种尴尬的方法是在鼠标按下时禁用按钮，并在短时间内启用它，比如 100 毫秒。如果 mouseup 在此期间发生，则不会触发 click。

$('#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>

于 2016-11-09T09:17:53.007 回答
1

在 Chrome 和 Internet Explorer 中，而不是 Firefox，在 mousedown 或 mouseup 处分离和重新附加元素将阻止触发 click 事件。在 Internet Explorer 中，这个技巧不会捕获双击（在 Chrome 中它会）。

但我不会依赖这种奇怪的行为，谁知道它是否会在某个时候改变。此外，请注意分离和重新附加也会对分离元素的子元素产生副作用（iframe 重新加载，文件字段重置，...）。

于 2013-11-23T18:29:20.277 回答
0

有一个解决方案：

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>

于 2019-11-18T08:21:05.533 回答
-3

是的，如果您return false;在 mouseup 处理程序中应该是可能的，因为在 mousedown 和 mouseup 发生后会触发 onclick。这在常规 javascript 中是可能的，因此它也应该与 jquery 事件处理程序一起使用。

编辑：

从事件处理程序返回一个布尔值实际上应该足以用于事件消费。但是，由于这在浏览器中非常不稳定，您应该使用该功能来手动取消事件冒泡：

event.stopPropagation();

其中 event 是您的事件处理程序接收的参数。

于 2012-05-24T23:28:26.197 回答