Bug 23876 – New-tab click uses current tab

• Status: UNCONFIRMED
• Component: Page Loading

[Jessica Hawkwell]

On the Quick Links menu (among other places), we have JavaScript links for memu items.  We are not the only site that uses JavaScript these click-anywhere links.  When middle-clicking a link that uses this method on any site, a new tab is opened, but the current tab also loads the destination page, very annoying when you only want the destination page to be loaded in a new tab.

[Mark Rowe (bdash)]

The source looks like:

<li onclick="document.location='/mygear/luggage.php';"><a href="/mygear/luggage.php">Luggage</a></li>

It's not clear why you think Safari's behaviour is incorrect.  It's certainly not what you intend, but the click event handler on the <li> element is navigating the current document.

[Jessica Hawkwell]

(In reply to comment #1)
> The source looks like:
> 
> <li onclick="document.location='/mygear/luggage.php';"><a
> href="/mygear/luggage.php">Luggage</a></li>
> 
> It's not clear why you think Safari's behaviour is incorrect.  It's certainly
> not what you intend, but the click event handler on the <li> element is
> navigating the current document.
> 

(In reply to comment #1)
> The source looks like:
> 
> <li onclick="document.location='/mygear/luggage.php';"><a
> href="/mygear/luggage.php">Luggage</a></li>
> 
> It's not clear why you think Safari's behaviour is incorrect.  It's certainly
> not what you intend, but the click event handler on the <li> element is
> navigating the current document.
> 

Other browsers handle it differently.  In other browsers, click processing stops after the new tab is opened.

[Mark Rowe (bdash)]

If you click on the <li> element outside of the <a> it contains you'll end up with the exact same problem.

[Jessica Hawkwell]

(In reply to comment #3)
> If you click on the <li> element outside of the <a> it contains you'll end up
> with the exact same problem.
> 

Aye, but the <a> is there so it CAN be middle-clicked.  Middle-clicking outside the <a> does nothing.  This is completely normal.

[Mark Rowe (bdash)]

On that basis the JavaScript on the <li> is completely redundant.

[Jessica Hawkwell]

(In reply to comment #5)
> On that basis the JavaScript on the <li> is completely redundant.
> 

No, the JavaScript in the <li> is there to provide click-anywhere.  The <a> is there so the menu item can be middle-clicked.  When the <a> is middle-clicked, the page should open in a new tab and the current tab should not be affected.

[Mark Rowe (bdash)]

So you can click anywhere, but only middle-click in certain places?..  It seems to me it would be better to make the entire clickable area the <a> element, then middle-click would work as expected on the entire link and you wouldn't need to involve JavaScript.

[Jessica Hawkwell]

(In reply to comment #7)
> So you can click anywhere, but only middle-click in certain places?..  It seems
> to me it would be better to make the entire clickable area the <a> element,
> then middle-click would work as expected on the entire link and you wouldn't
> need to involve JavaScript.
> 

How does one make <a> span the entire area?  Every time I've tried that, it only ends up being as large as the text, and in every browser I've tested.

[Franck]

Same problem with plenty of other websites
See bug #18161 and #22382