Replaces click

README.md

@@ -51,7 +51,8 @@ Vue.directive('longclick', longClickInstance)
 | Prop                  | Type            | Default     | Description                              |
 |-----------------------|-----------------|-------------|------------------------------------------|
 | delay                 | Integer (milliseconds)    |      400     | Delay until long click function is fired             |
-| interval                  | Integer (milliseconds)         |    50         | If value is greater than 0, handler function will be fire every `interval` milliseconds when component is pressed
+| interval                  | Integer (milliseconds)         |    50         | If value is greater than 0, handler function will be fire every `interval` milliseconds when component is pressed |
+| replacesClick         | Boolean         |   false     | Suppress regular click events during long click |
 
 ## Development
 

src/directives/longclick.js

@@ -1,4 +1,4 @@
-export default ({delay = 400, interval = 50}) => ({
+export default ({delay = 400, interval = 50, replacesClick = false}) => ({
   bind: function (el, binding, vNode) {
     if (typeof binding.value !== 'function') {
       const compName = vNode.context.name
@@ -9,6 +9,7 @@ export default ({delay = 400, interval = 50}) => ({
 
     let pressTimer = null
     let pressInterval = null
+    let suppressNextClick = false
 
     const start = (e) => {
       if (e.type === 'click' && e.button !== 0) {
@@ -37,13 +38,30 @@ export default ({delay = 400, interval = 50}) => ({
         clearInterval(pressInterval)
         pressInterval = null
       }
+
+      suppressNextClick = false
+    }
+
+    const click = (e) => {
+      if (suppressNextClick) {
+        // prevent any handlers for regular click firing
+        e.stopImmediatePropagation()
+      }
+
+      cancel()
     }
+
     // Run Function
     const handler = (e) => {
       binding.value(e)
+
+      suppressNextClick = replacesClick
     }
 
     ;['mousedown', 'touchstart'].forEach(e => el.addEventListener(e, start))
     ;['click', 'mouseout', 'touchend', 'touchcancel'].forEach(e => el.addEventListener(e, cancel))
+
+    // suppress relevant click events before they are handled anywhere else
+    el.addEventListener('click', click, { capture: true })
   }
 })