javascript - 多指触摸滑动事件

coder 2023-08-09 原文

我下面有两个 $('body').swipe(); 函数，它们显然不能一起运行，因为第二个取消了我想做的事情(两个函数运行在相同的 DOM 元素等)...

第一个函数正常工作。用两根手指左右滑动。我的问题是，这会禁用在 iPad 上可以进行的正常单指页面滚动。

问题:我想用两根手指运行向左和向右滑动的功能(有效)，但是我想在 1 根手指滑动时启用 allowPageScroll: 'vertical' .我怎样才能做到这一点？我想不出一种方法来运行 swipeLeft: 和 swipeRight: 函数中的选项(即 allowPageScroll: 'vertical', threshold: 200, fingers: 2)仅。

可以在这里找到使用的插件:https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

$('body').swipe({
    swipeLeft: function (event, direction, distance, duration, fingerCount) {

        // set cookie
        $.cookie('sb-swipe', 'inactive', { expires: 1 });

        //This only fires when the user swipes left
        openDashboard();

        // hide swipe instructions, if applicable
        $('div.instructions-overlay').fadeOut('slow');
    },
    swipeRight: function (event, direction, distance, duration, fingerCount) {
        //This only fires when the user swipes right
        closeDashboard();

        $('#employee-dash-btn').hide();
    },
        allowPageScroll: 'vertical',
        threshold: 200,
        fingers: 2
});

$('body').swipe({
    allowPageScroll: 'vertical',
    fingers: 1
});

最佳答案

我想我得到了一些东西，但不是你链接的 TouchSwipe 插件(经过大量测试后我只是放弃并尝试另一件事)。

我使用了可以找到的 Touchy (1.98 kb) here ，它支持最多 5 个手指。检测向左或向右滑动的另一部分有点手动，通过将两个手指在触摸事件开始和结束时的 X 坐标保存到变量中.

我们只需要比较两个第一个坐标是大还是小。下面的代码是向右滑动:

if (finger1Start < finger1End && finger2Start < finger2End)

当两个手指向同一方向移动时，我决定考虑真正的滑动，但如果您想改变，则由您决定。

最后，如果您真的想要阈值，您只需使用new Date().getTime(); 保存事件的开始和结束时间减去它们并验证它们是 200 毫秒的 >。如果你愿意，我可以更新代码。

这是 Fiddle ，我已经在 iPhone 4s (iOS 7.0.3) 上测试过了。

var finger1Start,
    finger1End,
    finger2Start,
    finger2End,
    threshold = 200;

$('body').touchy({
  two: function (hand, finger1, finger2) {
    
    hand.on('start', function (points) {
      finger1Start = points[0].x;
      finger2Start = points[1].x;
    });
    
    hand.on('end', function (points) {
      finger1End = points[0].x;
      finger2End = points[1].x;
      testSwipe();
    });
  }
});

function testSwipe () {
  if (finger1Start < finger1End && finger2Start < finger2End) 
    // The two X coordinates of the fingers have swipe to the right
    if (finger1End - finger1Start >= threshold &&
        finger2End - finger2Start >= threshold) {
      $('#message').text("You have swipe to the right");
    }
    else {
      $('#message').text("Not enought swipe");
    }
        
  }
  else if (finger1Start > finger1End && finger2Start > finger2End) {
    // The two X coordinates of the fingers have swipe to the left
    if (finger1Start - finger1End >= threshold &&
        finger2Start - finger2End >= threshold) {
      $('#message').text("You have swipe to the left");
    }
    else {
      $('#message').text("Not enought swipe");
    }
  }
}

#message {
  color:green;
}

#text {
  width: 100px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/jairajs89/Touchy.js/master/touchy.js"></script>
<body>
    <div id="message"></div>
    <div id="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut placerat lacus. Etiam vel aliquam quam. Aenean et hendrerit elit, quis porttitor erat. Cras lacinia ornare sem ut laoreet. Sed consectetur felis at hendrerit posuere. Nam porttitor magna sed quam malesuada, eu adipiscing sapien dapibus. Praesent fermentum sem sit amet diam posuere, non vestibulum velit porttitor. Etiam sodales tellus nec mi venenatis dignissim. Aliquam metus lectus, feugiat ac tellus hendrerit, auctor sollicitudin metus.
    
    Morbi bibendum lectus erat, a iaculis tellus egestas nec. Cras adipiscing augue ac lectus placerat tempor. Fusce iaculis mollis lectus, nec mattis mi rhoncus id. Nullam scelerisque feugiat mollis. Mauris nec augue erat. Aliquam fermentum nibh ligula, vel tempus dui feugiat vel. Aliquam a consequat nisl, eu vulputate velit. Mauris pulvinar accumsan leo nec venenatis. Nullam at orci nec lorem facilisis tempor ac vitae purus. Fusce elit nulla, commodo sit amet nisi nec, euismod egestas sem. Nulla dui libero, accumsan et dignissim vitae, commodo vitae leo. Suspendisse potenti. Pellentesque vitae lectus sit amet lacus pulvinar imperdiet in id nulla. Nunc lacinia felis eu lobortis pretium.
    </div>
</body>

关于javascript - 多指触摸滑动事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19987462/

多指 javascript finger code finger1 jquery html

有关javascript - 多指触摸滑动事件的更多相关文章

ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2
是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？最佳答案您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s
ruby-on-rails - 事件记录 : Select max of limit - 2
我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。最佳答案从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
ruby-on-rails - 事件管理员和自定义方法 - 2
这是我在ActiveAdmin中的自定义页面ActiveAdmin.register_page"Settings"doaction_itemdolink_to('Importprojects','settings/importprojects')endcontentdopara"Text"endcontrollerdodefimportprojectssystem"rakedataspider:import_projects_ninja"para"OK"endendend我想做的是，当我单击“导入项目”按钮时，我想在Controller中执行rake任务。但是我无法访问该方法。可能是什
ruby-on-rails - 在不重新查询数据库的情况下重新排序 Rails 中的事件记录？ - 2
例如，假设我有一个名为Products的模型，并且在ProductsController中，我有以下代码用于product_listView以显示已排序的产品。@products=Product.order(params[:order_by])让我们想象一下，在product_listView中，用户可以使用下拉菜单按价格、评级、重量等进行排序。数据库中的产品不会经常更改。我很难理解的是，每次用户选择新的order_by过滤器时，rails是否必须查询，或者rails是否能够以某种方式缓存事件记录以在服务器端重新排序？有没有一种方法可以编写它，以便在用户排序时rails不会重新查询结果
ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2
我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？最佳答案尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几
ruby-on-rails - 使用 Rails 事件记录获取二级模型 - 2
我有一个帖子属于城市的关系，城市又属于一个州，例如:classPost现在我想找到所有帖子及其所属的城市和州。我编写了以下查询来获取带有城市的帖子，但不知道如何在同一查找器中获取带有城市的相应州:@post=Post.find:all,:include=>[:city]感谢任何帮助。谢谢。最佳答案 Post.all(:include=>{:city=>:state}) 关于ruby-on-rails-使用Rails事件记录获取二级模型，我们在StackOverflow上找到一个类似的问
ruby - 在没有数据库的情况下伪造一个事件记录模型 - 2
我觉得我错过了什么。我正在编写一个rubygem，它允许与事件记录进行交互，作为其主要功能的附加功能。在为其编写测试用例时，我需要能够指定虚拟事件记录模型来测试此功能。如果我可以获得一个事件记录模型的实例，它不需要与数据库的任何连接，可以有关系，所有这些东西，但不需要我在数据库中设置表，那就太棒了。我对测试还很陌生，在Rails测试之外我也很陌生，但似乎我应该能够相当轻松地完成类似的事情，但我什么也没找到。谁能告诉我我错过了什么？我看过工厂、制造商、固定装置，所有这些似乎都想达到目标。人们如何在您只需要AR对象进行测试的地方测试gem？最佳答案
ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2
我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案那是一个javascript链接。Mechan
ruby-on-rails - 在事件记录库中添加某些方法的首选方法是什么？ - 2
我想创建一个模块，为从事件记录库继承的类提供一些通用方法。以下是我们可以实现的两种方式。1)moduleCommentabledefself.extended(base)base.class_evaldoincludeInstanceMethodsextendClassMethodsendendmoduleClassMethodsdeftest_commentable_classmethodputs'testclassmethod'endendmoduleInstanceMethodsdeftest_commentable_instance_methodputs'testinstanc

javascript - 多指触摸滑动事件

有关javascript - 多指触摸滑动事件的更多相关文章

随机推荐