All links fire Turbo, not just decorated ones


I have this code:

	<script type="module">
		import hotwiredTurbo from '';
	<script type="text/javascript">
		document.addEventListener("turbo:click", function () {
			alert("This alert box was called with the click event");

<div class="container">
			<ul class="navbar-list">
				<li class="navbar-item"><a class="navbar-link" href="/">Home</a></li>
				<li class="navbar-item"><a class="navbar-link" href="/login">Login</a></li>
				<li class="navbar-item"><a class="navbar-link" *data-turbo-action="replace"* href="/about">About</a></li>

Every link fires the Turbo click event, not just the one decorated with data-turbo-action. Is this normal behaviour?


Seems answer is to put data-turbo="false" on every element where you don’t want it to fire. Default is false but once a link is clicked that Turbo Drive does intercept, the it defaults to true.

I believe you can also set the default to false for the entire app by setting it in your JavaScript: = false

Then, you would essentially be doing the inverse, where you have to put data-turbo="true" on elements that you want to work with Turbo.

1 Like