Creé una barra de arrastre, que aumentará y disminuirá el ancho del contenedor al arrastrar y al hacer clic se contraerá/expandirá. Pero cada vez que trato de arrastrarlo, el evento de clic se activa y la barra de arrastre se contrae. Estoy usando backbone.js y usando el siguiente código.
events: { 'click .sideNavBar': 'toggleHeadersSection', 'mousedown #dragBar': 'increaseDragBarWidth', 'mouseup #dragBar': 'decreaseDragBarWidth', 'click #dragBar': 'toggleHeadersSection', }, increaseDragBarWidth: function (event){ $(document).mousemove(function(event){ $('.clinical-data-accordion').css("width",event.pageX+2); }); }, decreaseDragBarWidth: function (event){ $(document).unbind('mousemove'); }, toggleHeadersSection: function(event){ let clinicalDetailSection = this.$el.find("#clinicalDetailSection"); let isHidden = $(clinicalDetailSection).hasClass('isHidden'); this.displayHeadersSection(isHidden); },Aquí hay un JSFiddle con algunas imágenes que puede arrastrar y hacer clic. (es js puro)
Allí, un clic se separa de un arrastre al verificar la diferencia de tiempo de los eventos hacia arriba y hacia abajo del mouse.
let timeDelta; function startDrag(e) { // mouse up timeDelta = Date.now(); // get current millis ... function stopDrag() { // mouse down if (typeof drag == "undefined") return; if (drag) { if (Date.now() - timeDelta > 150) { // we dragged ...Si mantiene presionado el mouse durante más de 150 ms, no se cuenta como un clic. Si agrega ese cheque a su evento de clic, debería funcionar.