Question

是否可以使用jQuery防止同一元素上的点击事件被执行，在mousedown＆amp; mouseup事件刚被解雇。

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

Answer 1

有一个尴尬的方法是在mousedown时禁用按钮，并在短时间后启用它，如100ms。如果在此期间发生了鼠标操作，请单击“赢得”。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在Chrome和Internet Explorer中，不是Firefox，在mousedown或mouseup上分离和重新附加元素会阻止点击事件的触发。在Internet Explorer中，这个技巧虽然没有捕获双击（在Chrome中确实如此）。

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

Answer 3

有解决方案：

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

const handleOnMouseDown = e => {
  e.preventDefault()
  COORDS.xUp = null
  COORDS.xDown = 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;
  background: #ccc
}

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

Answer 4

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

修改

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

event.stopPropagation();

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

在mousedown＆amp;之后防止点击事件鼠标事件

4 个答案: