[wp-trac] [WordPress Trac] #34142: Links with preventDefault() don't have action prevented in Customizer

[WordPress Trac]

#34142: Links with preventDefault() don't have action prevented in Customizer
--------------------------+-----------------------------
 Reporter:  Looimaster    |       Owner:
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Future Release
Component:  Customize     |     Version:  3.4
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:  javascript
--------------------------+-----------------------------
Changes (by westonruter):

 * focuses:   => javascript
 * component:  General => Customize
 * version:  4.3.1 => 3.4
 * milestone:  Awaiting Review => Future Release


Comment:

 @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`:

 {{{#!js
 this.body = $( document.body );
 this.body.on( 'click.preview', 'a', function( event ) {
         event.preventDefault();
         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.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/34142#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform