From 52801ab8f12d73ce796b8cc4989f942637e32d2e Mon Sep 17 00:00:00 2001 From: James Diacono Date: Mon, 17 Jun 2019 16:58:38 +0100 Subject: [PATCH 1/5] Add replacesClick parameter --- src/directives/longclick.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/directives/longclick.js b/src/directives/longclick.js index 334d8f2..3a48dcd 100644 --- a/src/directives/longclick.js +++ b/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) { @@ -38,12 +39,27 @@ export default ({delay = 400, interval = 50}) => ({ pressInterval = null } } + + const click = (e) => { + if (suppressNextClick) { + // prevent handlers for regular click firing + e.stopPropagation() + + suppressNextClick = false + } + } + // 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 }) } }) From 81ce3d7f334d281d53ac90bcbcceae3e1dc5b0b2 Mon Sep 17 00:00:00 2001 From: James Diacono Date: Mon, 17 Jun 2019 17:03:07 +0100 Subject: [PATCH 2/5] Document replacesClick parameter --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index cb01ffd..230ab87 100644 --- a/README.md +++ b/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 From 387bedd5f46dc299fb0e1aac716f9e7a4c859d26 Mon Sep 17 00:00:00 2001 From: James Diacono Date: Tue, 18 Jun 2019 12:40:34 +0100 Subject: [PATCH 3/5] Ensure future clicks are not suppressed --- src/directives/longclick.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/directives/longclick.js b/src/directives/longclick.js index 3a48dcd..832ee14 100644 --- a/src/directives/longclick.js +++ b/src/directives/longclick.js @@ -38,15 +38,17 @@ export default ({delay = 400, interval = 50, replacesClick = false}) => ({ clearInterval(pressInterval) pressInterval = null } + + suppressNextClick = false } const click = (e) => { if (suppressNextClick) { // prevent handlers for regular click firing e.stopPropagation() - - suppressNextClick = false } + + cancel() } // Run Function From 2446ba4b1b926c1cfa57cc32f88c51ac7fe19cf7 Mon Sep 17 00:00:00 2001 From: James Diacono Date: Sun, 8 Sep 2019 12:16:25 +1000 Subject: [PATCH 4/5] Also call stopImmediatePropagation --- src/directives/longclick.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/directives/longclick.js b/src/directives/longclick.js index 832ee14..1019a09 100644 --- a/src/directives/longclick.js +++ b/src/directives/longclick.js @@ -46,6 +46,10 @@ export default ({delay = 400, interval = 50, replacesClick = false}) => ({ if (suppressNextClick) { // prevent handlers for regular click firing e.stopPropagation() + + // suppress other click handlers on this element, see + // https://github.com/ittus/vue-long-click/pull/2 + e.stopImmediatePropagation() } cancel() From 5299a5853629c3ccbd528caceb8ea5f763584f83 Mon Sep 17 00:00:00 2001 From: James Diacono Date: Sun, 8 Sep 2019 12:30:28 +1000 Subject: [PATCH 5/5] remove extraneous stopPropagation call --- src/directives/longclick.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/directives/longclick.js b/src/directives/longclick.js index 1019a09..88cd3a5 100644 --- a/src/directives/longclick.js +++ b/src/directives/longclick.js @@ -44,11 +44,7 @@ export default ({delay = 400, interval = 50, replacesClick = false}) => ({ const click = (e) => { if (suppressNextClick) { - // prevent handlers for regular click firing - e.stopPropagation() - - // suppress other click handlers on this element, see - // https://github.com/ittus/vue-long-click/pull/2 + // prevent any handlers for regular click firing e.stopImmediatePropagation() }