Question

我有以下事件处理代码：

$('#main').delegate('.slide', 'click', function () {
  slideshow.next();
});
$('#main').delegate('a', 'click', function (e) {
  e.stopPropagation();
});

.slide是一个内容很大的div。单击slideshow.next()时会调用.slide，除非点击链接，在这种情况下stopPropagation()和.slide永远不会收到点击事件。

我想在幻灯片上选择文字。目前，如果我单击并拖动，当我释放鼠标时，选择有效但.slide注册了点击并触发了slideshow.next()功能。我可以拦截一个事件吗？

页面为available here。

编辑：有趣的是，如果选择范围跨越多个HTML元素，则不会触发click，但选择是在元素内，则会触发它。

Edit2：好的，这是我的解决方案：

function setupHandlers() {
  var prevX = 0;
  var prevY = 0;

  $('#main').delegate('.slide', 'click', function (e) {
    var clickTolerance = 2;
    var dx = Math.abs(e.pageX - prevX);
    var dy = Math.abs(e.pageY - prevY);
    //if mouse has moved less than two pixels in any direction this is a click
    if (dx < clickTolerance && dy < clickTolerance) {
      slideshow.next();
    }
  });
  $('#main').delegate('.slide', 'mousedown', function (e) {
    prevX = e.pageX;
    prevY = e.pageY;
  });
  $('#main').delegate('a', 'click', function (e) {
    //Clicks on links shouldn't fire '.slide'.click() above
    e.stopPropagation();
  });
}

Answer 1

单击和选择文字的点击有什么区别？

我想说它可能与向下点击和鼠标上移之间的时间有关。或者也许更重要的是，它可以通过鼠标在向下点击时和鼠标按下事件时的屏幕位置的差异来诊断。

当触发mouseDown事件时，记录event.pageX和event.pageY值。当触发mouseUp事件时，将存储的x，y坐标与当前值进行比较。如果它们不同则是文本选择......什么都不做。如果它们相同，请交换页面。

不幸的是，不确定如何在JScript中实现它;）

Answer 2

使用$('.slide').select来捕捉选择事件并停止传播。

jQuery文本选择事件

2 个答案: