在Vue中，有時候我們需要監聽元素的“tap”事件。但是，原生的“tap”事件在移動端并不可用，因此我們需要封裝一個“tap”指令。

Vue.directive('tap', {
bind: function (el, binding) {
let eventStart,
eventEnd
if ('ontouchstart' in document.documentElement === true) {
eventStart = 'touchstart'
eventEnd = 'touchend'
} else {
eventStart = 'mousedown'
eventEnd = 'mouseup'
}
el.addEventListener(eventStart, function (e) {
el.__tapHoldTimeout = setTimeout(function () {
el.classList.add('v-touch-hold')
binding.value && binding.value.hold && binding.value.hold(e)
}, +el.dataset.holdTime || 500)
}, false)
el.addEventListener(eventEnd, function (e) {
clearTimeout(el.__tapHoldTimeout)
if (el.classList.contains('v-touch-hold')) {
el.classList.remove('v-touch-hold')
binding.value && binding.value.release && binding.value.release(e)
} else {
binding.value && binding.value.tap && binding.value.tap(e)
}
}, false)
el.addEventListener('touchcancel', function (e) {
clearTimeout(el.__tapHoldTimeout)
el.classList.remove('v-touch-hold')
}, false)
}
})

上面是一個簡單的“tap”指令的例子。在“bind”函數里，我們首先檢查是否是移動端，如果是，就使用“touchstart”和“touchend”事件，否則就使用“mousedown”和“mouseup”事件。

然后我們監聽“touchstart”或“mousedown”事件，在其中定義一個定時器，在一定時間內沒有觸發“touchend”或“mouseup”事件時，視為長按事件，并觸發“hold”回調函數。

如果在定時器時間內觸發了“touchend”或“mouseup”事件，則判斷是否觸發了長按事件，如果是，則觸發“release”回調函數，如果否，則觸發“tap”回調函數。

最后在“touchcancel”事件中清除定時器，并移除“v-touch-hold”類。

使用封裝的“tap”指令，只需要在需要監聽的元素上添加“v-tap”指令，同時可以傳入三個回調函數分別對應“tap”、“hold”和“release”事件。