I have my:

const Vue = require('vue/dist/vue.min');
const VueTouch = require('vue-touch/vue-touch.min.js');

Vue.use(VueTouch);

Then I add:
v-touch:swipeleft="fn"

To one of my pages elements, but as soon as i add the html attribute the page will break and wont load with the error in the title.

The error occurs in the bind event for vue touch at the start.

This is with vue 2.0.3

Hi,

event.preventDefault() is actually not stopping the normal behaviour when clicking on a link.
Having check on Hammer.js website, I don't think I'm doing it wrong - tell me if you can't reproduce it.

v-touch="press: func()" => func() will be excuted after the page is loaded, and the press event is not working.
but v-touch="press: func" works fine.

Then how to pass parameters?

I want to only enable vue-touch when using mobile mode, but for now I haven't found any solution to that, so I try to use v-if and v-else to specific different modes.

My Code:

        <calendar v-if="mode"
                  v-touch:panstart="onPanStart"
                  v-touch:pan="onPan"
                  v-touch:panend="onPanEnd"
                  :calendar="calendar"
                  :activeDate="activeDate"
                  :translateX="translateX"
                  @toggleActiveDate="toggleActiveDate"
                  @transitionend.native.self="onTransitionEnd"/>
        <calendar v-else
                  :calendar="calendar"
                  :activeDate="activeDate"
                  :translateX="translateX"
                  @toggleActiveDate="toggleActiveDate"/>

mode is a dynamic value, and when I resize the window, it will change, once vue-touch is enabled and then resize window to change mode, it will throw an error.

Uncaught TypeError: Cannot read property 'mc' of null

Reproduction: http://hi.1stg.me/#/member-subscribe

How to reproduce:
Just open the console and then resize the window size.

Besides, is there any way to enable or disable vue-touch dynamically?

I am using vue-touch: "^1.0.2" with vue: "^1.0.16" (with Browserify) and for me to get this to work was grab the Hammer lib and add it as a Global. This is quite un Vue, especially as a plugin, and of course of which, Hammer is a dependancy, and comes with the npm package vue-touch.

When I try to add global touch config, ie: VueTouch.config.pan({}) it fails because VueTouch.config is an empty object, although VueTouch.installed == true.

The v-touch directive works mind you.

The plugin failed when I try to use it inside a <template> node combined with a v-if directive.
An cannot addeventlistener on null target is triggered

There is currently no way to disable multitouch site wide for hammer js through vue-touch. I have site-wide bugs related to multi-touch, and need to access that hammer option.

How i change this on vue-touch?

http://hammerjs.github.io/tips/

希望新增事件委托机制

On multiple Android devices, I get very bad response for:

<div v-touch="tap:..">Tap me</div>

It requires multiple, very deliberate clicks to have the app respond. The padding area around the div is large enough.

Any ideas? Thanks!

我在require.js 的main函数中是这样写的：
`require.config({
paths:{
'vue': '//cdn.bootcss.com/vue/1.0.0/vue.min',
'vue-touch':'vue-touch',
'hammer':'//cdn.bootcss.com/hammer.js/2.0.1/hammer.min',
'zepto':'//cdn.bootcss.com/zepto/1.1.6/zepto.min'
}
})

require(['hammer', 'vue', 'zepto', 'vue-touch'], function(hammer, Vue, $, vueTouch){

})`

但总是报错：Uncaught Error: Module name "hammerjs" has not been loaded yet for context: _. Use require([])

我该如何是好？😢

As shown in the figure, under vue-touch directory and execute npm run dev, browse the example.html and �then the browser caught an error.

Environment:

• System: OS X El Capitan 10.11.1 (15B42)
• Chrome: 46.0.2490.80 (64-bit)
• node: v0.12.7

the hammer method getWindowForElement is returning null now. running on vue 0.11.5

=====version
vue-touch#0.1.1 bower_components\vue-touch
└── hammerjs#2.0.4

hammerjs#2.0.4 bower_components\hammerjs

=====code

            <div id="area" class="scroll">
             <ul class="list-area" id="area_list">
                 <li
      v-repeat="areas"
      v-touch="tap:test(this)"

     {{name}}
    </li>

    var area = new Vue({
        el:'#area',
        data:{
            areas:[

            ]
        },
        methods:{
            test:function(item){
                console.log(this);
            }
        }

    });

=====error
vue-touch.js:68 Uncaught TypeError: Cannot read property 'call' of undefined

I've been using this plugin and it works great if you do this:

<button class="button" v-touch:tap="register">Register</button>

But I've been getting this error:

Uncaught TypeError: Cannot read property 'call' of undefined
> vueTouch.install.Vue.directive.update.fn.handler

To fix this error, change the this.handler() function to:

this.handler = function ( e ) {
    e.targetVM = vm
    if ( fn ) {
        fn.call( vm, e )
    }
}

Hopefully the almighty code wonder @yyx990803 Evan You might redo this plugin for us? :D

Assuming vie-touch needs an update to support the breaking API changes. Skimming the code, nothing obvious jumped out at what I could do for a pull request.

popupShow is a data prop, and popupShow is sync with a component props

<description :show.sync="popupShow">

when use v-touch:tap="popupShow = true" to change the popupShow value， it will be change to true then auto change to false immediately

Could you add a bower.json to the project? :)

I would like to use swipe with touch inputs only (cause mouse inputs tend to be somewhat buggy), but I can't pass options to the Hammer constructor (as recommended here: link).
I'm using Vue 2.0 and vue-touch@next

我按照example中的写法报错

Version: 1.1.0
Reproduction: https://github.com/ypresto/vue-touch-appeared-radio-bug

1. Create v-touch:tap element and radio buttons.
2. Implement tap handler method which shows initially hidden radio buttons and hides tapped element.
3. Tap the v-touch:tap element.
4. The radio button which appeared on tapped position will be selected.

Workaround: Wrap v-touch:tap handler with setTimeout(..., 0).

当使用 v-touch:swipeleft, v-touch:swiperight 绑定了事件，原生的页面滚动就失效了

Hello,

On the #next branch, when you register a custom event with a direction option, it breaks things.

So, for example, if you register this:

VueTouch.registerCustomEvent('panhorizontal', {
type: 'pan',
direction: 'horizontal',
threshold: 100,
});

Then use it like:

<div v-touch:panhorizontal="onPanHorizontal">content</div>

No pan event is fired.

The reason for this is because this function:

guardDirections

is not being called in this block.

...meaning the 'horizontal' string in the options is never translated to the integer it has to be for it to work.

@tap.stop and @tap="demoMethod($event)" $event.stopPropagation()

it is error that dose not find stopPropagation method

after @tap pass $event is not primary MouseEvent

Problem

When Vue 2.0 came around, I attempted to update the v-touch directive to Vue 2.0's new API.

But we never published it so far, because I wasn't successful to keep the all features due to the API changes foir custom directives in Vue 2.0

Solution

I decided to rewrite it all as a component. API will look like this:

<v-touch
  tag="div" <!-- default. Use to change the root element rendered by the component -->
  v-on:pan="method"
  v-bind:pan-options="{ ... }"
  
  <!-- short syntax; -->
  @swipe="method"
  :swipe-options="{ ... }"
>
 <p>Slot Content goes here</p>
</v-touch>

Breaking Change & Migrating

Of course, this means we will have a complete breaking change with the version for Vue 1.0.

But I think the upgrade path is pretty simple:

<!-- 1.0 -->
<section v-touch:swipe="method" v-touch-options:swipe="{ ....}"
  <p>Swipe me!</p>
</section>
<!-- 2.0 -->
<v-touch tag="section" @swipe="method" :swipe-options="{ ....}"
  <p>Swipe me!</p>
</v-touch>

I'm already 90% done with the working prototype, And will hopefully find time this weekend to do the cleanup.

您好，您在15年12月的时候说vue-touch很久没有更新了，不建议使用，请问现阶段是否建议使用？谢谢

Idea for the syntax:

<v-touch 
  @swipe="callbackSwipe"
  "tap="callbackTap"

  <!-- enable all recognizers -->
  :enable="true"

  <!-- disable all recognizers-->
  :enable="false"

  <!-- Object Syntax: enable individual recognizers-->
  :enable="{swipe: true, tap: false}"
/>

TODO:

• add prop 'enabled', defaults tro true, accepts [Boolean, Object]
• Add Watcher that enables/disables recognizers according to that prop's value
• Update README
• add Tests

Not a major memory leak or anything, but this plugin should not expose the entire Hammer library to the window object.

├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Hey guys, I'm trying to use this (for vue2 using vue-touch@next) in a project based on Isomorphic Vue and I'm getting an error about window not being defined, so my guess is I'm trying to load this before the client side has been rendered/created. Any tips on how I should use this?

This was my previous code:

// main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import VueTouch from 'vue-touch';
import { configRouter } from './route-config';
require('es6-promise').polyfill()

Vue.use(VueRouter);
Vue.use(VueTouch);


const router = new VueRouter({
  history: true,
  saveScrollPosition: true,
});

configRouter(router);

const App = Vue.extend(require('./App.vue'));

router.start(App, '#app');

window.router = router;

New main.js file from isomorphic project

// main.js
import { app, store } from './app.js'

// get the initialstate from server-rendering.
store.replaceState(window.__INITIAL_STATE__)

app.$mount('#app')

This is where I tried to use VueTouch without success, getting the error window is not defined

// app.js
import Vue from 'vue'
import VueTouch from 'vue-touch'
import {sync} from 'vuex-router-sync'
import App from './App.vue'
import router from './router/index.js'
import store from './vuex/store.js'

sync(store, router)

const app = new Vue({
  router,
  store,
  ...App
})

Vue.use(VueTouch)
export {app, router, store}

I know this is not related to vue touch but to my project config, so I thought this is good place to ask as any, thanks

v-touch:swipeleft="onBannerSwipe(-1)"

在页面加载的时候就执行了一次onBannerSwipe，且不能再执行

http://jsfiddle.net/alchen/rjqt2x91/12/

It seems there's a leak somewhere. Toggling the list between empty and some content will cause the memory usage to grow indefinitely, at least as far as I can tell.

Consider the following template:

<ul>
  <li v-repeat="items">
   <div v-touch="tap: onTap, press: onPress"></div>
  </li>
</ul>

When I remove an element:

vm.$data.items.pop()

I get an error:

TypeError: undefined is not an object (evaluating 'handlers[event].splice')

It turns out that within Hammer (2.0.1) the handlers is an object with event names as keys. The code in vue-touch (line 70) checks the length of handlers:

if (!this.mc.handlers.length) {

But because handlers is an object, the length is undefined and this statement always yields true. So when the first event (tap) is being unbound, the hammer object is deleted and unbinding the second event results in the error.

If I use vue-touch in a mobile project everything works fine in iOS. The problem is, if we use the same code on android the touches (especially a :active css class) will show up about 200ms after the actual touch.

Do you know why?

Thanks!

Using swipeleftis stopping the container it's applied to from scrolling the content inside it. Is there a way around this? I assume it's because hammer is picking up all the swipe/scroll events and not letting the browser handle them?

    <div class="menu animated" v-bind:class="menuClass" v-touch:swipeleft="closeMenu">
        <div class="menu-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium asperiores beatae dolorem ea
                eligendi, esse, ipsam laboriosam molestiae molestias nam omnis quam quidem rem reprehenderit soluta
                veniam voluptatum. Facere, necessitatibus.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium asperiores beatae dolorem ea
                eligendi, esse, ipsam laboriosam molestiae molestias nam omnis quam quidem rem reprehenderit soluta
                veniam voluptatum. Facere, necessitatibus.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium asperiores beatae dolorem ea
                eligendi, esse, ipsam laboriosam molestiae molestias nam omnis quam quidem rem reprehenderit soluta
                veniam voluptatum. Facere, necessitatibus.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium asperiores beatae dolorem ea
                eligendi, esse, ipsam laboriosam molestiae molestias nam omnis quam quidem rem reprehenderit soluta
                veniam voluptatum. Facere, necessitatibus.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium asperiores beatae dolorem ea
                eligendi, esse, ipsam laboriosam molestiae molestias nam omnis quam quidem rem reprehenderit soluta
                veniam voluptatum. Facere, necessitatibus.</p>
        </div>
    </div>

That's the CSS properties being applied from vue-touch/hammer

    touch-action: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

Now that Vue 2.0 is in release-candidate status and hence its API fixed, can you please add support for Vue 2.0 to your vue-touch plugin? Thanks for your efforts.

<a v-touch="tap:onTap">Tap me!</a>

理应是

<a v-touch:tap="onTap">Tap me!</a>

vue的directive参数格式应该是这样的，我也是被坑了才去看的源码

望知悉

I started using this plugin because I had a problem on iphones where i had an anchor that had a hover event , and a click event. So in that case the during the first 'click' on the iphone it only activated the hover event, so users would have to in a sense double click to activate the click - this plugin seemed to fix that.

But when using an @click along side v-touch, it fires the events twice on desktop, it will fire the touch event, and the click event. I tried adding .prevent to the v-touch call, but it didnt do anything. Is this supposed to be able to prevent default action with touch events?

最近做一个移动端的项目，其中有一个组件是导航条，每个导航元素分为上部图标，下部文字。然后为导航元素添加 v-touch:tap 事件，类似下方结构：

<div class="btn" v-touch:tap="tapHanlder">
    <div class="btn-icon"></div>
    <div class="btn-text"></div>
</div>

在mac上使用chrome一切正常，但是在手机UC浏览器上tap事件就很不灵敏。

经过测试发现可能是touch了 btn-icon 或 btn-text， 但是tap事件并未冒泡到 btn ，我在btn-icon 和 btn-text 上方添加了一个 position:absolute 元素，给这个元素添加 v-touch 事件，就很灵敏。类似下方结构：

<div class="btn" style="position:relative;">
    <div style="position:absolute;top:0;left:0;width:100;height:100;z-index:1" v-touch:tap="tapHanlder"></div>
    <div class="btn-icon"></div>
    <div class="btn-text"></div>
</div>

我试了 v-touch:tap.capture 但是UC表现还是不太好，请问是不是 vue-touch 暂时还不支持 capture 呢？

vue-touch 今年又开始维护了吗？ 要监听tap, swipe等事件， 还有什么替代方案吗？

After updating to the latest vue (2.1.8) getting the following error using vue-touch v1.1.0

Cannot read property 'priority' of undefined

It is caused by:

 Vue.directive('touch', {

      isFn: true,
      acceptStatement: true,
      priority: Vue.directive('on').priority,

Looks like Vue.directive('on') now returns undefined. Assume that it previously returned an object.

hello, guys, When to support version vuejs 2.0 ?

DoubleTap is registred as:

VueTouch.registerCustomEvent('doubletap', {
  type: 'tap',
  taps: 2
});

Im using v-touch as a row in a table:

<v-touch tag="tr" v-for="item in individualDiagnosis"
                             v-on:doubletap="showItem(item)"
                             v-on:tap="hilightItem(item)"
                             :class="[item.classes]">
               <td>{{item.name}}</td>         
</v-touch>

Problem is that on doubletap both tap and doubletap methods get called.

How can I get this to work?

Getting the following error on the next branch:

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

code looks like:

        <div class="overflow" >
            <v-touch class="inner"
                 :style="innerStyle"
                 v-on:swipeleft="next"
                 v-on:swiperight="prev" >
                <slot></slot>
            </v-touch>
        </div> 

I know it's the v-touch component causing the error, since when I delete the component, the error goes away.

I'm trying vue-touch#next under Vue 2.0 with...

v-touch:swipe="eventListItemSwiped({ itemId: item.id, direction: $event.direction })"
v-touch-options:swipe="{ direction: 'horizontal', threshold: 100 }"

...but it seems the special $event property does not exist for vue-touch events. I always just get a Vue warning: Property or method "$event" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance).

I know I could do...

v-touch:swipe="eventListItemSwiped"
v-touch-options:swipe="{ direction: 'horizontal', threshold: 100 }"

...and receive the Hammer event as the single argument and then assemble the data structure in the callback as { itemId: $(ev.target).attr("data-id"), direction: event.direction }. But could you please add back the $event property for vue-touch? It would align vue-touch again to the regular Vue event handling where $event is available. Without this the Hammer events have to be handled differently than other types of events.

Or did I missed something and hence $event is not working for me?

不支持吗？