Internal jump links and shift-clicking on links in widgets (to edit) erroneously cause navigation in Customizer preview

[afercia]

thx to ​this answer by Otto, I finally got the reason of some weirdness in the customizer preview.
About this line:
this.body.on( 'click.preview', 'a', function( event ) ...
the problem here is that selecting 'a' is a bit too generic and it will affect also "in-page links", causing a POST request and then some ajax voodoo even when the link is an in-page anchor.
Just two examples:

jQuery UI tabs use in page anchors with an href like:
href="#tabs-1"
href="#tabs-2"

many developers use a href="#" and then jQuery preventDefault(); to reveal/hide content, effects, whatever...

Say you're in the customizer preview in some *internal* page of your site, then you click on a link with href="#" and... you get the homepage.
That's because the actual link will be interpreted as ​http://yoursite.com/# and the POST request will be triggered even if you use jQuery preventDefault();
Using return false; instead of jQuery preventDefault(); seems to work (because return false; does something more than
preventDefault();) btw using href=#" and jQuery preventDefault(); is quite a common practice (and best practice).

Or try to build some jQuery UI tabs in a page, then preview that page in the customizer and click on a tab. On twentythirteen I've got the whole home page loaded *inside* the tab content :-)

Maybe it would be better to don't select all the links in the page and change this line:
this.body.on( 'click.preview', 'a', function( event ) {
to say "select all links with an href attribute which doesn't start with #".

As a side note, the "edit link" doesn't work in the customizer preview but I can understand it would be a bit tricky to find a safe solution.
thx very much
Andrea

[afercia]

integration:
one more test case would be:

<a href="#">Back to top</a>

with some jQuery smooth scrolling, I can't count how many themes use that and that won't work in the customizer preview, will trigger a request for the home page.

Btw there also links that *contain* an hash for example:
​http://yoursite.com/yourpage/#comments
when you're already on the single post that triggers a POST request which reloads the page, this should be avoided. But if you're in an archive page things are different and the request should take place.
Btw, for the simpler case, I've tested with

"a:not([href*='#'])"

and seeems to work.

[SergeyBiryukov]

Duplicate of #23225 and #24032.

[westonruter]

This issue is actually not a duplicate of #23225 or #24032. Internal jump links and shift-clicking on links in widgets (to edit) erroneously cause navigation in Customizer preview. I initially put together a workaround for the jump links in ​http://wordpress.stackexchange.com/q/214937/8521

[westonruter]

26005.diff​ fixes three things:

• Only listen for clicks on links that have href attributes.
• Prevent following links clicked in the Customizer if shift key is pressed when clicking; this fixes an issue when trying to shift-click on a widget or nav menu item (#32681) to focus on the control in the Customizer.
• Prevent following jump links (starting with #), but instead scroll that element into view.

Note that the logic here will likely be removed once transactions (#30937) and the natural URL is loaded into the iframe (#30028).

[westonruter]

Assigning for review to test with nav menu item control focus patch (#32681).

[MattGeri]

This works great with my code for #32681

[westonruter]

In 36371:

Customizer: Fix click.preview event handler for jump links and shift+clicks in preview.

• Prevent following jump links (starting with #), but instead scroll that element into view.
• Prevent following links clicked in the Customizer if shift key is pressed when clicking; this fixes an issue when trying to shift-click on a widget or nav menu item (#32681) to just focus on the control in the Customizer.

Fixes #26005.