https://adam-coster.pages.dev/_app/immutable/nodes/24.DQ2Fgg37.js

1import{t as s,a as t}from"../chunks/BRuBKdOt.js";import"../chunks/B4ndRVNs.js";import{e as o}from"../chunks/D3qO8zUI.js";var n=s(`<p>While working on a web app where I have to constantly manage which elements are focused, I ran into a surprise: triggering the browser's back/forward operations via the mouse (by clicking the mousewheel left/right) caused the elements I was hovering over to capture focus!</p> <p>In most cases this wouldn't matter, since you'd be triggering a browser navigation and therefore making current focus state irrelevant. And even if the navigation didn't destroy focus, having the hovered element gain focus probably won't hurt anything.</p> <p>But in my case it did matter, so I had to disable it. To do so, I attached listeners to the <code>onpointerdown</code> and <code>onmousedown</code> events, and blocked default behaviors if the mouse button was not the primary one. The listener function looked something like this:</p> <pre><code class="hljs language-js"><span class="hljs-comment">/**
2 * <span class="hljs-doctag">@param</span> &lbrace;<span class="hljs-type">MouseEvent|PointerEvent</span>&rbrace; <span class="hljs-variable">e</span>
3 */</span>
4<span class="hljs-keyword">export</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">abortIfNotPrimaryMouseButton</span>(<span class="hljs-params">e</span>) &lbrace;
5	<span class="hljs-comment">// The "primary" (left-click, usually) mouse button is indexed 0. Anything else</span>
6	<span class="hljs-comment">// probably shouldn't cause focus!</span>
7	<span class="hljs-keyword">if</span> (e.<span class="hljs-property">button</span> !== <span class="hljs-number">0</span>) &lbrace;
8		<span class="hljs-comment">// Then it's not a left-click! We want to avoid incidental focus caused by e.g. mousewheel left/right click</span>
9		e.<span class="hljs-title function_">preventDefault</span>();
10		e.<span class="hljs-title function_">stopPropagation</span>();
11	&rbrace;
12&rbrace;
13</code></pre> <h2 id="why-does-browser-forwardback-trigger-focus"><a aria-hidden="true" tabindex="-1" href="#why-does-browser-forwardback-trigger-focus"><svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Why does Browser Forward/Back trigger focus?</h2> <p>The mousewheel left/right click do not trigger the <code>onclick</code> event, but they <em>do</em> trigger <code>onmouseup</code>/<code>onmousedown</code> (and <code>onpointer(up|down)</code>) events. Apparently these events cause the target element to capture focus.</p> <p>If you capture these events via a listener, you can tell which mouse button was responsible by checking the event's <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button"><code>button</code> property</a>. When that value is <code>0</code> you're dealing with the primary button (left-click, probably).</p>`,1);function i(e){var a=n();o(12),t(e,a)}export{i as component};