Tengo un ícono de carrito de compras para hacer clic o presionar prolongadamente. si el usuario hace clic en eso, el ajax agrega el producto al carrito, y cuando el usuario mantiene presionado el mouse, aparece la lista del carrito.
aquí está el código js:
const shopping = document.getElementById('shopping'); shopping.addEventListener('mousedown' , function() { pressTimer = window.setTimeout(longpressed,1000); }); shopping.addEventListener('mouseup' , function() { clearTimeout(pressTimer); }); shopping.addEventListener('click' , function(e) { console.log('click'); $.ajax({ url: "{{route('user.cart.add' , $product->id)}}", method: 'get', data: { _token: '{{ csrf_token() }}', id: '{!! $product->id !!}' }, success: function(quantity){ $("#lblCartCount").html(quantity); } }); }); function longpressed() { console.log('longpress'); if(!$('#showFactor').is(':empty')){ $('#showFactor').html(''); $('#showFactor').hide(); }else{ $.ajax({ url: "{{route('user.cart.index')}}", method: 'get', data: { _token: '{{ csrf_token() }}', }, success: function(response){ $('#showFactor').html(response); $('#showFactor').show(); } }); } }la pregunta es ¿cómo puedo evitar el evento de clic después de una pulsación larga? El problema es que cuando apareció la lista de carritos, ¡el producto se agregó al carrito! Quiero que el clic no dispare cuando es una pulsación larga.
Puede cancelar la propagación del evento de clic conectándose a la fase de captura de eventos .
const shopping = document.getElementById('shopping'); shopping.addEventListener('mousedown' , function() { pressTimer = window.setTimeout(longpressed,1000); }); shopping.addEventListener('mouseup' , function(e) { clearTimeout(pressTimer); }); shopping.addEventListener('click' , function(e) { console.log('click'); }); function longpressed() { console.log('longpress'); window.addEventListener( 'click', captureClick, true // <-- This registers this listener for the capture // phase instead of the bubbling phase! ); } function captureClick(e) { e.stopPropagation(); // Stop the click from being propagated. window.removeEventListener('click', captureClick, true); // cleanup } <button type="button" id="shopping"> Shopping cart </button>