vue移动端长按事件

Html

Css

请在移动端查看效果，pc无效果

 #name {
	width:500px;
	height:500px;
	background:red;
}

Vue.directive("longtouch", function(el, binding) {
    var oDiv = el,
        value = binding.value,
        x = 0,
        y = 0,
        z = 0,
        timer = null;
    oDiv.addEventListener("touchstart", function(e) {
        if (e.touches.length > 1) {
            return false;
        }
        z = 0;
        timer = setTimeout(function() {
            z = 1;
        }, 500);
        x = e.touches[0].clientX;
        y = e.touches[0].clientY;
        e.preventDefault();
    }, false);
    document.addEventListener("touchmove", function(e) {
        if (x != e.touches[0].clientX || y != e.touches[0].clientY) {
            clearTimeout(timer);
            return false;
        }
    }, false);
    document.addEventListener("touchend", function(ev) {
        if (z != 1) {
            clearTimeout(timer);
            x = 0;
            y = 0;
            return false;
        } else {
            x = 0;
            y = 0;
            z = 0;
            alert("长按了啊")
        }
    }, false);
})
window.onload = function() {
    new Vue({
        el: '#test',
        data: {
            timeOutEvent: 0
        },
        mounted() {

}
    })
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

vue移动端长按事件



代码描述：模拟移动端长按事件

3

最新

发表评论全部评论

暂时没有评论！

晓钕zhi0

2017/8/19 8:57:28

自定义指令后面是啥呢？不是应该触发方法吗
回复

SolarEclipse0

2017/7/7 11:20:04

其实就是在touchstart和touchend之间算时间
回复

iexn0

2017/7/6 10:06:24

长按手指离开才有响应。
正常的移动端长按手指不需要离开就有响应
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

黑

相关代码

vue移动端长按事件

最新