最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to set different velocity to recognise swipes with hammer.js jQuery plugin? - Stack Overflow

programmeradmin0浏览0评论

I'm having issues finding / figuring out how to add options to hammer.js when using it's jQuery plugin. This is how I initiate hammer:

            /* Create Hammer object for swipable game cards */
            $('.game-card-mobile')
            .hammer()
            .bind('swiperight swipeleft press', function(ev) {
              console.log(ev.type);
            });

I find it that in order for swipe action to be performed a relatively fast swipe needs to occur, I want to decrease speed of swipe required to fire the event. After reading through the docs: / There seems to be a velocity option that defaults to 0.65, so I assume this can be changed somehow to lets say 0.5 in order to fire event on slower swipes?

EDIT: if this would be of any help here are some examples of tests for swipe written in javascript: .js/blob/master/tests/unit/gestures/test_swipe.js
this shows example of how {threshold: 1} is set, I'm trying to achieve this while using jQuery plugin.

I'm having issues finding / figuring out how to add options to hammer.js when using it's jQuery plugin. This is how I initiate hammer:

            /* Create Hammer object for swipable game cards */
            $('.game-card-mobile')
            .hammer()
            .bind('swiperight swipeleft press', function(ev) {
              console.log(ev.type);
            });

I find it that in order for swipe action to be performed a relatively fast swipe needs to occur, I want to decrease speed of swipe required to fire the event. After reading through the docs: http://hammerjs.github.io/recognizer-swipe/ There seems to be a velocity option that defaults to 0.65, so I assume this can be changed somehow to lets say 0.5 in order to fire event on slower swipes?

EDIT: if this would be of any help here are some examples of tests for swipe written in javascript: https://github./hammerjs/hammer.js/blob/master/tests/unit/gestures/test_swipe.js
this shows example of how {threshold: 1} is set, I'm trying to achieve this while using jQuery plugin.

Share Improve this question edited Apr 14, 2015 at 13:16 Ilja asked Apr 14, 2015 at 11:21 IljaIlja 46.5k103 gold badges289 silver badges527 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 8

The link you post, is from a library Called Hammer.js. You must import this library in your project to make it work.

Minimal velocity required before recognizing, unit is in px per ms as they say, then it´s 0.65px each millisecond, then making it 0.50 should make the event occur with less velocity in the touch.

0.50 -> will fire before

0.80 -> more difficult to fire

var hammertime = new Hammer(myElement, myOptions);
hammertime.on('swipe', function(ev) {
    alert(ev);
});

hammertime.get('swipe').set({ velocity: 0.80});

Is maybe the right way?

Hoy it helps you.


Edit: As said in the jquery api page: The Hammer instance is stored at $element.data("hammer").

Then maybe

$("#yourdivtoswipe_id").data('hammer').get('swipe').set({ velocity: 0.80});

Regards

This is how:

$("#yourelemenet").hammer({options}).bind("tap", function(ev) {});

note the options object. Here is a quick example from some of my code:

$("#yourelemenet").hammer({threshold: 10, posThreshold:50, time:1000}).bind("tap", function(ev) {});

edit: add velocity where your see threshold, posThreshold, time above..

发布评论

评论列表(0)

  1. 暂无评论
ok 不同模板 switch ($forum['model']) { /*case '0': include _include(APP_PATH . 'view/htm/read.htm'); break;*/ default: include _include(theme_load('read', $fid)); break; } } break; case '10': // 主题外链 / thread external link http_location(htmlspecialchars_decode(trim($thread['description']))); break; case '11': // 单页 / single page $attachlist = array(); $imagelist = array(); $thread['filelist'] = array(); $threadlist = NULL; $thread['files'] > 0 and list($attachlist, $imagelist, $thread['filelist']) = well_attach_find_by_tid($tid); $data = data_read_cache($tid); empty($data) and message(-1, lang('data_malformation')); $tidlist = $forum['threads'] ? page_find_by_fid($fid, $page, $pagesize) : NULL; if ($tidlist) { $tidarr = arrlist_values($tidlist, 'tid'); $threadlist = well_thread_find($tidarr, $pagesize); // 按之前tidlist排序 $threadlist = array2_sort_key($threadlist, $tidlist, 'tid'); } $allowpost = forum_access_user($fid, $gid, 'allowpost'); $allowupdate = forum_access_mod($fid, $gid, 'allowupdate'); $allowdelete = forum_access_mod($fid, $gid, 'allowdelete'); $access = array('allowpost' => $allowpost, 'allowupdate' => $allowupdate, 'allowdelete' => $allowdelete); $header['title'] = $thread['subject']; $header['mobile_link'] = $thread['url']; $header['keywords'] = $thread['keyword'] ? $thread['keyword'] : $thread['subject']; $header['description'] = $thread['description'] ? $thread['description'] : $thread['brief']; $_SESSION['fid'] = $fid; if ($ajax) { empty($conf['api_on']) and message(0, lang('closed')); $apilist['header'] = $header; $apilist['extra'] = $extra; $apilist['access'] = $access; $apilist['thread'] = well_thread_safe_info($thread); $apilist['thread_data'] = $data; $apilist['forum'] = $forum; $apilist['imagelist'] = $imagelist; $apilist['filelist'] = $thread['filelist']; $apilist['threadlist'] = $threadlist; message(0, $apilist); } else { include _include(theme_load('single_page', $fid)); } break; default: message(-1, lang('data_malformation')); break; } ?>