如果CustomEvent在元素上触发，则取消'Click'DOM事件

Question

I'm building an app in Cordova and, as many apps have, I'm trying to implement long-press events that occur after holding down on an element.

I'm using https://github.com/john-doherty/long-press-event which fires a CustomEvent called 'long-press' after holding down on an element for 1.5 seconds.

I have an element I'd like to put both a 'Click' listener and a 'long-press' listener on, similar to many mobile apps such as photo galleries or email that react differently between a click and a long-press event.

The long-press event does fire, but the 'Click' event also fires every time and I can't find how or when I should try to stop it from firing. I've tried several placements of stopDefault() and stopPropogation() to no avail.

The HTML with a listener is

<div class="grid-col grid-col--1">
    <div class="grid-item bd bdrs-4 bdw-1 bdc-grey-400">
        <img class="portfolio-img lightbox-img" src="https://glamsquad.sgp1.cdn.digitaloceanspaces.com/GlamSquad/artist/1/portfolio/2019-05-16-06-07-370bc89b7bfe9769740c1f68f7e103340a94aaaeaa5d6f139f841e3c022ad309de.png">
    </div>
    <div class="grid-item bd bdrs-4 bdw-1 bdc-grey-400">
        <img class="portfolio-img lightbox-img" src="https://glamsquad.sgp1.cdn.digitaloceanspaces.com/GlamSquad/artist/1/portfolio/2019-05-16-06-07-38d8d03cc6edef043d25e9099b883cd235c823a267ab03b9e740934f06c4f87e2f.png">
    </div>
</div>

while the JS code is listening for a click on a lightbox-img, or a long-press on a portfolio image

$(document).on('long-press', '.portfolio-img', (e) => {
    e.preventDefault();
    e.stopPropagation();
    console.log('Portfolio long press event.');
 });
$(document).on('click', '.lightbox-img', imageClick);

Is there any actual way to fire the long-press event but have it cancel or stop the click event from occurring?

Answer 1

One way to do this, is to disable the pointer-events from your clicked element from the moment your long-press event fired, and until the next mouseup event fires on the document.

The best would probably to make it from your library, so here is a fork of this library which does now expose a preventDefaultClick() method on the CustomEvent:

 (function (window, document) { 'use strict'; var timer = null; // check if we're using a touch screen var isTouch = (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)); // switch to touch events if using a touch screen var mouseDown = isTouch ? 'touchstart' : 'mousedown'; var mouseOut = isTouch ? 'touchcancel' : 'mouseout'; var mouseUp = isTouch ? 'touchend' : 'mouseup'; var mouseMove = isTouch ? 'touchmove' : 'mousemove'; // wheel/scroll events var mouseWheel = 'mousewheel'; var wheel = 'wheel'; var scrollEvent = 'scroll'; // patch CustomEvent to allow constructor creation (IE/Chrome) if (typeof window.CustomEvent !== 'function') { window.CustomEvent = function(event, params) { params = params || { bubbles: false, cancelable: false, detail: undefined }; var evt = document.createEvent('CustomEvent'); evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); return evt; }; window.CustomEvent.prototype = window.Event.prototype; } // listen to mousedown event on any child element of the body document.addEventListener(mouseDown, function(e) { var el = e.target; // get delay from html attribute if it exists, otherwise default to 1500 var longPressDelayInMs = parseInt(el.getAttribute('data-long-press-delay') || '1500', 10); // start the timer timer = setTimeout(fireLongPressEvent.bind(el, e), longPressDelayInMs); }); // clear the timeout if the user releases the mouse/touch document.addEventListener(mouseUp, function() { clearTimeout(timer); }); // clear the timeout if the user leaves the element document.addEventListener(mouseOut, function() { clearTimeout(timer); }); // clear if the mouse moves document.addEventListener(mouseMove, function() { clearTimeout(timer); }); // clear if the Wheel event is fired in the element document.addEventListener(mouseWheel, function() { clearTimeout(timer); }); // clear if the Scroll event is fired in the element document.addEventListener(wheel, function() { clearTimeout(timer); }); // clear if the Scroll event is fired in the element document.addEventListener(scrollEvent, function() { clearTimeout(timer); }); /** * Fires the 'long-press' event on element * @returns {void} */ function fireLongPressEvent() { var evt = new CustomEvent('long-press', { bubbles: true, cancelable: true }); // Expose a method to prevent the incoming click event var el = this; evt.preventDefaultClick = function() { // disable all pointer-events el.style["pointer-events"] = "none"; // reenable at next mouseUp document.addEventListener(mouseUp, e => { el.style["pointer-events"] = "all"; }, {once: true}); }; // fire the long-press event this.dispatchEvent(evt); clearTimeout(timer); } }(window, document)); btn.addEventListener('click', e => console.log('clicked')); btn.addEventListener('long-press', e => { console.log('long-press'); e.preventDefaultClick(); // prevents the incoming 'click' event }); 

 <button data-long-press-delay="500" id="btn">click me</button> 

But if like me yo have a mouse that does fire a bunch of events at every swipe, then you might prefer this demo where the wheel etc timeout triggers have been disabled:

 (function (window, document) { 'use strict'; var timer = null; // check if we're using a touch screen var isTouch = (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)); // switch to touch events if using a touch screen var mouseDown = isTouch ? 'touchstart' : 'mousedown'; var mouseOut = isTouch ? 'touchcancel' : 'mouseout'; var mouseUp = isTouch ? 'touchend' : 'mouseup'; var mouseMove = isTouch ? 'touchmove' : 'mousemove'; // wheel/scroll events var mouseWheel = 'mousewheel'; var wheel = 'wheel'; var scrollEvent = 'scroll'; // patch CustomEvent to allow constructor creation (IE/Chrome) if (typeof window.CustomEvent !== 'function') { window.CustomEvent = function(event, params) { params = params || { bubbles: false, cancelable: false, detail: undefined }; var evt = document.createEvent('CustomEvent'); evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); return evt; }; window.CustomEvent.prototype = window.Event.prototype; } // listen to mousedown event on any child element of the body document.addEventListener(mouseDown, function(e) { var el = e.target; // get delay from html attribute if it exists, otherwise default to 1500 var longPressDelayInMs = parseInt(el.getAttribute('data-long-press-delay') || '1500', 10); // start the timer timer = setTimeout(fireLongPressEvent.bind(el, e), longPressDelayInMs); }); // clear the timeout if the user releases the mouse/touch document.addEventListener(mouseUp, function() { clearTimeout(timer); }); // clear the timeout if the user leaves the element document.addEventListener(mouseOut, function() { clearTimeout(timer); }); // clear if the mouse moves document.addEventListener(mouseMove, function() { // clearTimeout(timer); }); // clear if the Wheel event is fired in the element document.addEventListener(mouseWheel, function() { // clearTimeout(timer); }); // clear if the Scroll event is fired in the element document.addEventListener(wheel, function() { // clearTimeout(timer); }); // clear if the Scroll event is fired in the element document.addEventListener(scrollEvent, function() { // clearTimeout(timer); }); /** * Fires the 'long-press' event on element * @returns {void} */ function fireLongPressEvent() { var evt = new CustomEvent('long-press', { bubbles: true, cancelable: true }); // Expose a method to prevent the incoming click event var el = this; evt.preventDefaultClick = function() { // disable all pointer-events el.style["pointer-events"] = "none"; // reenable at next mouseUp document.addEventListener(mouseUp, e => { el.style["pointer-events"] = "all"; }, {once: true}); }; // fire the long-press event this.dispatchEvent(evt); clearTimeout(timer); } }(window, document)); btn.addEventListener('click', e => console.log('clicked')); btn.addEventListener('long-press', e => { console.log('long-press'); e.preventDefaultClick(); // prevents the incoming 'click' event }); 

 <button data-long-press-delay="500" id="btn">click me</button> 

Answer 2

Propagation is not the problem here - it's the fact that a long click event and a regular click event are actually the same thing, so they both fire. They're triggered because you do mouse down and then mouse up. The fact that there's a longer wait between the 2 events does not stop the regular click from being fired.

The simplest way to handle this would be to set a flag that indicates whether the long-click event has been triggered, like this...

var longClickTriggered = false;

$(document).on('long-press', '.portfolio-img', (e) => {
    longClickTriggered = true;
    //e.preventDefault();   // these 2 lines are probably not needed now
    //e.stopPropagation();
    console.log('Portfolio long press event.');
});

$(document).on('click', '.lightbox-img', (e) => {
    if (!longClickTriggered) {
        imageClick();
    }
    longClickTriggered = false;
});

I commented these lines out...

e.preventDefault();
e.stopPropagation();

because I believe they were only there in your attempt to stop the click event handler from firing.

Answer 3

You can use a boolean, along with mousedown and mouseup listeners

 var timeoutId = 0, isHold = false; $('#ele').on('mousedown', function() { timeoutId = setTimeout(onEleHold, 1000); }).on('mouseup', function() { if (!isHold) { onEleClick(); } isHold = false; clearTimeout(timeoutId); timeoutId = 0; }); function onEleHold() { console.log('hold'); isHold = true; } function onEleClick() { console.log('click'); } 

 #ele { background: black; width: 100px; height: 20px; color: white; cursor: pointer; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="ele">Click Here</div>