meckodo / vue-tap

a v-tap directive of vue.js

vue-tap ( 已支持vue2.0，最下方有更新日志 )

a v-tap directive of vue.js

How To use

example

Update

2017.06.17(fix)

• 修复父级DOM里含有input，点击input无法聚焦的BUG（仅支持vue2以上的版本）
• vue1.x不再新增特性
• 下一步准备新增长按事件 (v-tap:long)

2017.03.16(fix)

• 主要BUG修复！v-if和v-else指令绑定事件绑定不对的问题
• 现已修复，可以看if-else.html测试
• 感谢 coco 帮助我进行测试！

2017.02.21(fix)

• 重大BUG修复！经过v-for渲染出来的列表，在生命周期修改了数据重新渲染后v-tap获取不到最新值
• 现已修复，可以看list-test.html测试
• 感谢 火星X王子 帮助我进行测试！

2016.10.02(update)

支持Vue2.0,兼容Vue1.0

2016.9.25(fix)

• 修复了PC端的bug
• test-href.html页面,新增测试
• 我是测试v-tap="a++"直接执行表达式 我是history.go(-1)

2016.9.19(update)

• 优化了a标签快速跳转逻辑,可以直接在 写v-tap指令,这样即可快速跳转

2016.8.26(update)

• 发布npm, 各位可用npm i v-tap --save;下载使用
• 重写了currentTarget对象,避免currentTarget为null的情况
• fix : 判断el是否为a标签,避免获取href出错

2016.8.25(update)

• 经测试没有点透问题

2016.8.24(update)

• 统一为v-tap,兼容PC和移动端
• 新增捕获a标签的href地址,点击a标签可实现快速跳转
• 解决部分手机点击没有反应的问题
• 准备加入npm大家庭

2016.1.20(merge)

• 新增 dom带有disable属性时，tap失效

2015.12.22(update)

• 新增vue-tap-click版本兼容PC和移动端,v-tap指令将自动判断使用click还是tap事件
• vue-tap 是不带兼容版本, vue-tap-click兼容版本, 请客官自行选择进食.

vue-tap's Issues

touchend中为什么要延迟执行handler

代码在：https://github.com/MeCKodo/vue-tap/blob/master/vue-tap.js#L104

setTimeout(function() {
    self.handler(e);
},150)

为什么要延迟150ms才执行，如果不加这个延迟，可以更快的进行跳转。

冒昧问下，是否解决了300ms的问题

冒昧问下，是否移除了点击事件300ms延迟的问题？

延迟定死150毫秒貌似不太科学

我发现源码中延迟设为150毫秒，而且不可更改。
这样貌似不太合理，150毫秒的延迟无法更好的解决移动端300毫秒延迟的问题。
不知道我分析的对不对，但是实际项目测试中绑定事件后很难触发，好点好几次才能触发一次。

The param of directive "v-tap" must be a function!

我在非原生link 标签添加 v-tap 就会报 The param of directive "v-tap" must be a function! 而且没有任何效果。

可不可心告诉这是干嘛的？

readme里一句介绍这是做干嘛的话都没有！我怎么知道这是不是我要找的？难道让我先安装上试完了才知道？

使用时，没有跳转链接

<a v-tap="{ methods : cant }" href="http://www.baidu.com">无法跳转的</a>

问个技术问题

vue-tap.js，104行，setTimeout(function() { self.handler(e); },150) 为什么需要延迟150，望指点。谢谢

vue-tap有没有长按触发这类事件

为什么使用setTimeout 150 这样点击是否会有延迟呢

setTimeout(function () {
            self.handler(e);
        }, 150)

父元素绑定滑动事件，子元素搬定tap 事件，如何让它不冒泡

目标：父元素绑定滑动事件，子元素搬定tap 事件，如何做才能正确区分点击事件还是滑动事件？

冒昧的问一下

从源码

if (self.modifiers.stop)
  e.stopPropagation();
if (self.modifiers.prevent)
  e.preventDefault();

中看出，stop是阻止事件继续冒泡，prevent是阻止事件DOM元素默认行为，作者在文档说明中好像说的有点不对，欢迎交流

动态dom 如何写 tap?

动态dom 如何写 tap?

【android】v-tap 绑定到带有css transition上的元素时，android上事件触发失效问题

图一是绑定v-tap 到span上，图二是span:after 有transition, 只要开启transition这行css， v-tap只在第一个点击的元素上触发，后面其它的元素不触发该事件，注释掉transition 这行css就正常了。
为了验证是v-tap问题，我换了@click 事件，均都正常触发了事件执行

[Vue warn]: Failed to resolve directive: tap

已经按照文档导入，警告该问题
import vueTap from 'v-tap'
Vue.use(vueTap)

使用

移动端测试可以为什么chrome 没有任何反映？

这样的写法在手机上可以，但是在chrome 下模拟移动端却没有任何反映呢？

阻止冒泡事件无效

v-tap="gotoProductDetails"
v-tap.prevent="handleAddToCart"
子级和父级的tap事件都触发了

滑动问题

当列表元素使用v-tap时 滑动列表元素 在滑动过程中点击会进入点击事件 如何在滑动过程中点击停止滑动

prevent没效

##<#a v-tap.prevent="cant" href="这是无法跳转的">由于写了.prevent 这是无法跳转的<#/a>##


这样还是会跳转的

router-link 上如何写 v-tap

rt 直接写 v-tap 点击页面就刷新了 state全丢失，该如何使用？

a标签下的跳转逻辑是否有点问题?

如果想要快速跳转直接写v-tap即可不用写任何参数

can't

这两种情况重叠了 , 后一种的逻辑感觉有点问题 ;
写了methods但没写prevent的情况下 ; 是否应该先执行cant , 然后进行跳转(虽然这在实际应用中很少会用到)

wechat browser: Property or method "splice" is not defined on the instance but referenced during render

template:

script:
import Vue from 'vue';
import Tap from 'v-tap';
Vue.use(Tap);
method:
workScale: function (params) {
console.log('this', params, this);
},
and console ：
this Object {src: "./images/0422.jpg", event: TouchEvent, tapObj: Object}
VueComponent {_uid: 5, _isVue: true, $options: Object, _renderProxy: Object, _self: VueComponent…}

[Vue warn]: Property or method "splice" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

是否可以介绍一下和FastClick js的区别？

如题：
如果
document.addEventListener('DOMContentLoaded', function () { if (window.FastClick) window.FastClick.attach(document.body); }, false);
这样就能解决穿透，那么我们为何放弃直接写@click简写，有什么理由？

IOS设备上，fixed的button，滑动一段距离无法响应点击事件

以下是我的测试链接
http://7xpg8c.com1.z0.glb.clouddn.com/v-tap-test/fixed-button.html?a=2

在IOS设备的微信中打开以上链接，往下滑动一段距离，使滚动条离开顶部，此时点击button，不会弹出alert。

以下为源代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试fixed btutton在ios上无法点击的问题</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<style>
		body {
			color: #fff;
		}

    .demo {
      height: 1000px;
      background-color: bisque;
    }

    .fixed-bottom {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 50px;
    }

    .fixed-top {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      width: 100%;
      height: 50px;
    }
	</style>
</head>
<body>
<button class="fixed-top" v-tap="clickMe('点击顶部按钮了！')">我是固定在顶部的button</button>
<div class="demo">
</div>
<button class="fixed-bottom" v-tap="clickMe('点击底部按钮了！')">我是固定在底部的button</button>

<script src="./vue.js"></script>
<script src="./vue-tap.js"></script>
<script>

  new Vue({
    el: "body",
    data: {
    },
    methods: {
      clickMe: function (message) {
        alert(message)
      }
    }
  });
</script>
</body>
</html>

4vue-tap.js?95dc:148 Uncaught TypeError: Cannot read property 'call' of undefined

4vue-tap.js?95dc:148 Uncaught TypeError: Cannot read property 'call' of undefined；在使用插件时出现这个提示，不知道是什么原因，引入不能使用

ios上有点问题

当html的阅读顺序为 rtl 的时候，安卓没什么大问题，ios上点击很困难

这张图 的颜色跟尺寸框的内边距放大到了之前的两倍 ，在放大之前很难选中点击的框，测试出来的结果似乎只有在direction：rtl的时候才有。

蜜汁bug。

安卓v-for列表，滚动惯性失效

安卓v-for列表，滚动惯性失效，ios没问题

能否提供一个 es6 的 module 用来 import ？

现在你把 install 合在一起的，不能只 import directive，不方便扩展。

用了这个之后，和样式:active 在部分安卓机有问题 发现点击效果不连贯

用了这个之后，和样式:active 在部分安卓机有问题 发现点击效果不连贯

checkbox点击不能响应

tap点击checkbox时没有响应，click就可以，移动，pc端都不行。。。

在使用v-if时事件绑定错误！~

<div class="right" v-tap="{ methods :sendOrder}" v-if="canBuy"> 确认订购 </div> <div class="right disabled" v-else> 确认订购 </div>
在当canBuy变量为false时，v-tap方法绑定到了另外一个div上~！

如何阻止冒泡？

是使用.stop吗？

tap 判断偏差太小

看了源码，发现检测的偏差范围小于2
这个值有点小，在三星s6机器下，tap无法触发，在其他机型上若手速过快也无法触发
建议大小调至30

bug，有截图

希望增加默认简写方法

希望增加直接传递字符串的简写方式：
比如：v-tap="somMethod" 等价于 v-tap="{methods:somMethod}"。

列表循环绑定，事件触发不正确

列表渲染的时候，事件绑定触发对应点击的元素

Uncaught TypeError: Property description must be an object: undefined

手机端长按事件

移动端项目，需要一个长按出弹窗的功能，这个插件有这个功能吗？

数组列表改变后，v-tap的传值有个BUG

<a href="#" v-for="value of cacheRecord" v-tap.prevent="{methods:recordSearch,value:value}">{{value}}</a>

cacheRecord是一个数组，大概格式是[12,35,98,13]，点击第一个a标签，这个时候recordSearch方法里打印的value值是12。

第一次点击后，将cacheRecord改成为[18,12,35,98,13]，点击第一个a标签，这个时候recordSearch方法里打印的value值仍是12。(期望值是18)

用@click替换v-tap，达到期望

touchstart和touchend的preventDefault的问题

touchstart和touchend事件preventDefault()是不是有问题啊，手指不小心按在link上的时候都没法滚动屏幕了。

可以在router-link 上使用吗？

按钮
使用了vue-router后，有什么办法可在这上面使用。我试过添加v-tap但是会刷新页面

直接用v-tap时，会报错，并且会把移动端下所有的默认click覆盖掉

有没有longTap 事件支持？

长按事件有没有啊？怎么用？

无法获取绑定的元素

代码：
'''
＜div v-tap=“helloClick”＞
＜div ＞
＜div ＞
＜/div＞
＜/div＞
＜/div＞
'''
e.currentTarget结果是null

父级 DOM 里含有 textarea 时，点击 textarea 也无法聚焦

你好，最近修复了父级 DOM 里 input 无法聚焦的 bug，但是 textarea 标签依然有这个问题，看了你最近的 commit，vue-tap.js 这个地方需要改成

if(tagName === 'input' || tagName === 'textarea') {
 return value.event.target.focus();
}

希望大神尽快更新🙏

使用require引入时，无法使用

    <div id="app">
        <a href="#a" v-text="demo" v-tap.prevent="{ methods : openUrl }"></a>
    </div>
    <script src="libs/vue.min.js"></script>
    <script src="libs/vue-tap.js"></script>
    <script>
    var app = new Vue({
        el: '#app',
        data: {
            demo: 'abc'
        },
        methods: {
            openUrl: function(event) {
                console.log(event);
            }
        }
    });
    </script>

以上代码会正确执行，并打印出相应信息。

    <div id="app">
        <a href="#a" v-text="demo" v-tap.prevent="{ methods : openUrl }"></a>
    </div>
    <script src="libs/require.min.js"></script>
    <script>
    requirejs(['vue.min', 'vue-tap'], function(Vue, tap) {
        var app = new Vue({
            el: '#app',
            data: {
                demo: 'abc'
            },
            methods: {
                openUrl: function(event) {
                    console.log(event);
                }
            }
        });
    });
    </script>

保证代码正确性，无法触发openUrl方法

v-tap只是用来stop或prevent事件时,希望可以更简便些

您好,目前在使用该插件时,遇到个小问题,就是如果我只是想用来v-tap.prevent或stop时,必须要传入一个methods(如:v-tap.stop="{methods:functionName}")才可以,否则会报错,希望可以支持直接v-tap.stop或v-tap.prevent 这样在使用时更方便些,谢谢

当有input 获焦时，tap 点击事件不会让Input失焦

这里获焦，
Button 这里点击，input还是获焦状态．

【手机端】input外层有div包裹，失焦后，对外层div点击，方法执行，但input获取不到焦点

HTML:

<div v-tap="{ methods: clearError }">
  <input>
  <div>{{ errorMessage }}</div>
</div>
<button v-tap="{ methods: addError }">Error</button>

Javascript:

methods: {
  clearError () {
    this.errorMessage = ''
  },
  addError () {
    this.errorMessage = 'Error!'
  }
}

外层写一个tap,内层的input获取不到焦点

我的v-tap指令不能识别，vue2.0

[Vue warn]: Failed to resolve directive: tap
(found in anonymous component - use the "name" option for better debugging messages.)