Make WordPress Core

Opened 9 years ago

Closed 8 years ago

#34142 closed defect (bug) (fixed)

Links with preventDefault() don't have action prevented in Customizer

Reported by: looimaster's profile Looimaster Owned by: westonruter's profile westonruter
Milestone: 4.7 Priority: normal
Severity: normal Version: 3.4
Component: Customize Keywords: has-patch needs-testing
Focuses: javascript Cc:


I have "menu" and "cart" icons in the menu (created via custom CSS classes in Appearance > Menus) which are empty links <a href="#" class="cart-icon">Cart</a> with default action prevented and replaced with custom JavaScript action (opening sidebar menu or showing cart overlay).

When these links are clicked in the Customizer then the page is reloaded. So, it's never possible to open the menu or cart by clicking on these icons.

Change History (9)

#1 @westonruter
9 years ago

  • Component changed from General to Customize
  • Focuses javascript added
  • Milestone changed from Awaiting Review to Future Release
  • Version changed from 4.3.1 to 3.4

@Looimaster Yes, this is a problem in the current state of the Customizer.

The Customizer code that is causing problems here for you is in customize-preview.js:

this.body = $( document.body );
this.body.on( 'click.preview', 'a', function( event ) {
        self.send( 'scroll', 0 );
        self.send( 'url', $(this).prop('href') );

So you can see that when you click a link, the Customizer will intercept that and try to navigate you to the URL in the link (even if it is just a link to '#', i.e. a page reload).

The quick workaround for you is to simply replace your a tag with something else, which would be better anyway since it is not a link. Try replacing what you have with:

<span tabindex="0" class="cart-icon">Cart</span>

This should have the desired effect.

The ultimate solution here will be to ensure the Customizer is compatible with your original code, however. This will ultimately be achieved when we can just use a natural URL inside the iframe as opposed to having to do Ajax POST requests to refresh the preview. See #30028 and #30937.

#2 @celloexpressions
8 years ago

  • Keywords close added

@westonruter do we need to keep this ticket open? I think the best solution on the theme side is to use semantic elements such as <button> for non-link links, since empty links are discouraged anyway.

Aside: the code noted above prevents content skiplinks from working (such as the table of contents links on; in fact, they eventually redirect to the front page. Probably want a new ticket for that.

#3 @westonruter
8 years ago

  • Keywords close removed
  • Milestone changed from Future Release to 4.6

@celloexpressions let's keep it open and let it be a test case to the implementation of transactions.

#4 @celloexpressions
8 years ago

Sounds good, and that should also fix the additional bug I noted above.

#5 @westonruter
8 years ago

  • Owner set to westonruter
  • Status changed from new to accepted

#6 @westonruter
8 years ago

  • Milestone changed from 4.6 to Future Release

Punting due to transactions being too large to finish patch and test in time for 4.6.

#7 @westonruter
8 years ago

  • Keywords has-patch needs-testing added
  • Milestone changed from Future Release to 4.7

This has been implemented in the patch for #30937.

Namely in

Please test: grunt patch:

This ticket was mentioned in Slack in #core by westonruter. View the logs.

8 years ago

#9 @westonruter
8 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 38810:

Customize: Implement customized state persistence with changesets.

Includes infrastructure developed in the Customize Snapshots feature plugin.


Props westonruter, valendesigns, utkarshpatel, stubgo, lgedeon, ocean90, ryankienstra, mihai2u, dlh, aaroncampbell, jonathanbardo, jorbin.
See #28721.
See #31089.
Fixes #30937.
Fixes #31517.
Fixes #30028.
Fixes #23225.
Fixes #34142.
Fixes #36485.

Note: See TracTickets for help on using tickets.