jQuery在滚动div时阻止点击事件触发

时间:2012-05-29 10:42:42

标签: jquery events click

听起来很简单吧?但我正在使用自定义滚动控件(http://github.com/inuyaksa/jquery.nicescroll),我尝试了大多数使用draggable()时防止这种情况的技巧。但是他们没有为此工作...我在这里上传了页面和代码:

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

这适用于触摸屏项目。到目前为止,我唯一的解决方案是将$ thumbs绑定到'dblclick',这样在拖动鼠标/手指后它会停止触发...但是我真的希望在滚动停止后单击一下就可以了。 / p>

4 个答案:

答案 0 :(得分:3)

您最好的选择将是一个解决方案类似于有多少自动填充功能取消原生事件,而是使用超时和标记仅在所需的情况下执行:

  1. event.preventDefault()“点击”相关控件上的事件,<a />标签等(即不要让任何与触发点击相关的本地浏览器行为发生)。
  2. 在阻止默认后点击“click”事件,将点击操作放在一个小setTimeout中并保存超时句柄。
  3. 在“stopdrag”事件中,清除超时句柄;这理论上会在“click”事件超时期间发生,并防止在逻辑stopdrag之后发生单击,而在真正的单击时,将没有stopdrag来取消超时(因此该操作将根据需要进行)。 / LI>

    代码:

    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();
    });
    

答案 1 :(得分:1)

我不使用这个库,但也许这可以帮到你。作为一个获取,它不适用于移动设备,它适用于触摸屏。我的手机上的所有工作都很好,滚动就可以了。

您有一些配置属性,其中一些看起来只是为了满足您的需求。 其中一些:

。 touchbehavior - 启用光标拖动滚动,如桌面计算机中的触摸设备,默认为false

。 cursordragontouch,拖动光标处于touch / touchbehavior模式(默认值:false)

https://github.com/inuyaksa/jquery.nicescroll/blob/master/README

我没有看到您的代码,您的链接已损坏,也许您已经了解此属性。但如果没有,希望这会对你有所帮助。这只是找到一个母马的巢穴。

答案 2 :(得分:1)

我不知道如何管理触控事件。不过这就是我为点击事件做的方式,我猜这与http://jsfiddle.net/USvay/

的差别不大

这个想法是为了防止点击事件,相反,如果某个时间已经过去,你的欲望函数将在鼠标上启动。

var clicked = true,
    tOut;

$('a').on('click', function (e) {
    e.preventDefault();
}).on('mousedown', function () {


    tOut = setTimeout(function () {
        clicked = false;
    }, 200);



}).on('mouseup', function () {

    if (clicked == true) {
        clearTimeout(tOut);
        my_function();

    } else {
        clicked = true;
        $('<p>Dragged</p>').appendTo('#result');
    }

});

function my_function() {
    $('<p>Clicked</p>').appendTo('#result');
}

答案 3 :(得分:1)

你试过了吗?

event.stopPropagation()

这是reference on this function