jQuery防止在滚动div时触发click事件 [英] jQuery prevent click event from firing when scrolling a div

问题描述

听起来很简单吧?但我使用的是自定义滚动控件( http://github.com/inuyaksa/jquery.nicescroll)，并且我尝试了使用过的大多数技巧来防止在使用draggable()时出现这种情况.但他们对此不起作用...我在此处上传了页面和代码:

演示: http://www.beforethecode.net/blazin 来源: http://www.beforethecode.net/blazin/blazin.zip

这是针对触摸屏项目的.到目前为止，我唯一的解决方案是将$ thumbs绑定到'dblclick'，以便在拖动鼠标/手指后将停止触发……但是我真的很想在滚动停止后单击使它工作./p>

解决方案

您最好的选择将是与有多少个自动完成功能可以取消本地事件并使用超时和标志仅在所需情况下进行操作类似的解决方案:

相关控件上的
1. event.preventDefault()"click"事件，< a/> 标记等(即，请勿让任何本机浏览器行为发生与触发点击有关的事情.
2. 防止默认设置后，在"click"事件上，将click操作放入小的 setTimeout 中，并保存超时句柄.
3. 在"stopdrag"事件上，清除超时句柄；从理论上讲，这将在点击"事件超时期间发生，并防止在逻辑停止拖动后发生点击，而在实际单击中，将没有停止拖动来取消超时(因此将按需要进行操作)./li>

代码:

  var clickActionTimeout = null;函数clearClickActionTimeout(){if(clickActionTimeout){clearTimeout(clickActionTimeout);clickActionTimeout = null;}}$ elem.click(function(e){e.preventDefault();clearClickActionTimeout();clickActionTimeout = setTimeout(function(){//如果我们到达这里，这是一次真正的点击...openPicture();}，200)；});$ elem.bind('stopdrag'，function(){clearClickActionTimeout();}); 

Sounds easy enough right? But I'm using a custom scrolling control (http://github.com/inuyaksa/jquery.nicescroll) and I've tried most of the tricks I've seen to prevent this when using draggable(). But they aren't working for this... I uploaded the page and the code here:

Demo: http://www.beforethecode.net/blazin Source: http://www.beforethecode.net/blazin/blazin.zip

This is for a touch screen project. So far my only solution was to bind the $thumbs to 'dblclick' so it would stop firing after dragging the mouse/finger... But I would really like to get it to work with a single click after the scrolling has stopped.

解决方案

Your best bet will be a solution similar to how many autocompletes work canceling native events and instead using timeouts and flags to only act under desired circumstances:

1. event.preventDefault() "click" event on related controls, <a /> tags, etc. (i.e. don't let any native browser behavior happen relating to triggering click).
2. On "click" event after preventing default, put the click action in a small setTimeout and save the timeout handle.
3. On "stopdrag" event, clear the timeout handle; this will theoretically happen during the "click" event timeout period and prevent a click from happening after a logical stopdrag, whereas on a real click there will be no stopdrag to cancel the timeout (so the action will take place as desired then).

Code:

var clickActionTimeout = null;

function clearClickActionTimeout() {
  if(clickActionTimeout) {
    clearTimeout(clickActionTimeout);
    clickActionTimeout = null;
  }
}

$elem.click(function(e) {
  e.preventDefault();
  clearClickActionTimeout();
  clickActionTimeout = setTimeout(function() {
    // This was a real click if we got here...
    openPicture();
  }, 200);
});

$elem.bind('stopdrag', function() {
  clearClickActionTimeout();
});

这篇关于jQuery防止在滚动div时触发click事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！