Los modales se cierran con el evento de mouseup fuera del modal en lugar de con un clic completo

Question

Versión GrapesJS [x] Confirmo que uso la última versión de GrapesJS ¿Qué navegador usas? Chrome 143.0.7499.169 Enlace de demo reproducible https://grapesjs.com/demo.html Describe el bicho ¿Cómo reproducir el bicho? Arrastra un componente de código personalizado a la página. El modal debe abrirse automáticamente, de lo contrario haz doble clic en el componente de código personalizado en la vista previa. Haz clic y mantén pulsado dentro del modal, luego arrastra el ratón fuera del modal y suelta...

derikb · Accepted Answer

Por si sirve de algo, usé la página de demostración como enlace reproducible, aunque esa página no usa la versión más reciente de grapesjs. Mi código local está usando la versión reciente y muestra el mismo problema.

derikb · Answer

Vale, entiendo por qué está pasando. Porque el modal y su entorno son todos un elemento que tiene los eventos asociados, así que un mousedown, arrastrar, mouseup sigue tratándose como clic porque todo está sobre el mismo elemento. Event.target acaba siendo donde terminó el clic (fuera del cuerpo modal) y pasa la prueba en ModalView.onClick para que el modal se cierre. Compáralo con los modales de Bootstrap. Añaden su fondo como un elemento separado del cuerpo modal, situado justo detrás de él m...

GJS Helper · Answer

Gracias por informar de esto, @derikb. Buena pregunta sobre los modales que cierran al acercarse fuera del modal en lugar de un clic completo. El enfoque recomendado con Componentes es utilizar la API orientada a eventos. Empieza aquí: Consulta la documentación de GrapesJS de tu módulo específico Busca el método del oyente de eventos 'on()' La mayoría de las operaciones se pueden realizar escuchando eventos del editor y de los componentes Patrones comunes: '''javascript Prestad atención a los c...

Los modales se cierran con el evento de mouseup fuera del modal en lugar de con un clic completo

Pregunta

Respuestas (3)

Preguntas y respuestas relacionadas

ErrorTipo no capturado: No se pueden leer propiedades de undefined (leyendo 'Lienzo') mientras se arrastra un componente en el Panel del Gestor de Capas

El evento "storage:end:load" no se activa cuando todos los componentes están montados en el lienzo

Estamos intentando almacenar los datos del editor grapesJS en la aplicación Angular 10, obteniendo un error CORS, imagen adjunta abajo

0.18.3 edición de texto no se activa para los componentes de texto > enlace

Plugins de pago que cumplen con este problema

Tutoriales relacionados

Introducing Search on GJS.Market

Cómo construir un creador de páginas impulsado por IA con GrapesJS en 2026

¿Cuánto cuesta construir un creador de páginas SaaS en 2026?

Explorar categorías de plugins