11

听起来很容易对吧？但我使用的是自定义滚动控件（http://github.com/inuyaksa/jquery.nicescroll），并且我已经尝试了大多数我在使用 draggable() 时看到的防止这种情况的技巧。但他们没有为此工作......我在这里上传了页面和代码：

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

这是一个触摸屏项目。到目前为止，我唯一的解决方案是将 $thumbs 绑定到“dblclick”，这样它就会在拖动鼠标/手指后停止触发……但我真的很想在滚动停止后单击一下就能让它工作。

4

4 回答 4

3

您最好的选择将是一个类似于有多少自动完成工作取消本机事件的解决方案，而是使用超时和标志仅在所需的情况下采取行动：

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

代码：

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();
});
于 2013-05-29T09:57:37.503 回答
1

你有没有尝试过：

event.stopPropagation()

这是此功能的参考。

于 2013-06-05T07:10:33.523 回答
1

我不使用这个库，但也许这对你有帮助。顺便说一句，它不是用于移动设备，而是用于触摸屏。在我的手机上一切正常，滚动没问题。

您有一些配置属性，其中一些看起来只是为了满足您的需要。这里有一些：

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

. cursordragontouch，也可以在触摸/触摸行为模式下拖动光标（默认值：false）

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

我没有看到您的代码，您的链接已损坏，也许您已经知道此属性。但如果没有，希望这会对你有所帮助。这只是找个马窝。

于 2013-06-04T22:09:14.800 回答
1

我不知道如何管理触摸事件。然而，这就是我对点击事件的处理方式，我想它与那些http://jsfiddle.net/USvay/没有太大区别

这个想法是为了防止点击事件，相反，如果某个时间已经过去或没有过去，您的愿望功能将在 mouseup 上触发。

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');
}
于 2013-06-05T05:10:57.697 回答