Disable hyperlink preventDefault()
I solved it for now by adding an additional script to the component to listen for clicks on the li, which triggers directly the tab('show') call on the a.
Read full answer below ↓Question
By default all html anchor elements have their click behaviour disabled (which is very useful of course).
However, I would like to make elements editable that requires some javascript behaviour on hyperlinks to still pass through. For example, editing the content of the various panels in a bootstrap tabs navbar:
I have found the following code snippets that set the related preventDefault() behaviour: FrameView and ComponentLinkView.
I tried unsetting the registered click events after loading GrapesJS using removeEventListener, but currently without any luck. Are there any suggestions on what I can try to disable this preventDefault() behaviour on specific elements. Or is it an idea to add the preventDefault only on elements with a href that does not start with a # for example?
Answers (1)
I solved it for now by adding an additional script to the component to listen for clicks on the li, which triggers directly the tab('show') call on the a.
$(document).find("li.nav-item").click(function() {
$(this).find('a').tab('show');
})
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2184
[QUESTION] Losing predefined media queries
Hi. I have a predefined json of a template which contains a set of html elements and styles which are parsed into the set of components upo...
Issue #2793
Extend Image Traits
Hello, i would like to extend the image type with some options, specially with a redirect option on click. I tried this solution after the...
Issue #2744
[QUESTION] Disable a block drag&drop
Hello everyone, I would like to make forbidden the drop of one block before another specific one. Context : i've create a new trait for som...
Issue #1485
How to prevent styling html components?
Im trying to create some templates, which should not be editable and styleable. So that when i drag in my blocks then should stay as define...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Tutorial
GrapesJS vs Gutenberg: How to Build a Custom WordPress Page Builder
Compare GrapesJS and Gutenberg, learn when to use each, and follow a step-by-step guide to build a production WordPress page builder with GrapesJS.
Tutorial
Integrating GrapesJS into a Vue 3 App — Complete Guide for 2026
Build a Vue 3 landing page builder with GrapesJS and Vite. Custom blocks, composables, remote storage, TypeScript & production tips. Updated for 2026.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.