All links fire Turbo, not just decorated ones

1

Hi,

I have this code:

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

<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>
			</ul>
 		</div>

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

Cheers.

2

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.

3

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

Turbo.session.drive = 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