为什么在新选项卡和当前选项卡中单击WP PHP呈现的链接，其中target =“_ blank”？

So I know this kind of question has been asked in here, but mine appears to be different from others.

The code below shows that if there is a URL populate it and open it in a new tab, however, for some strange reason the link opens in a new tab (YAY!!) AND opens in the current tab (BOO!!). Why is it opening in both the new tab and the current tab?

I just checked in an incognito window and it happens there also so it doesn't appear to be a cookie issue either.

<div class="box span4">
    <?php if( $url1 != '' && $img1 != '' ): ?>
        <a href="<?php echo esc_url( $url1 ); ?>" target="_blank" class="box-link">
            <center><img class="box-image" src="<?php echo esc_url( $img1 ); ?>"/></center>
        </a>
    <?php else: ?>
        <?php if( $img1 != '' ): ?>
            <a class="box-no-url">
                <center><img class="box-image" src="<?php echo esc_url( $img1 ); ?>"/></center>
            </a>
        <?php endif; ?>
    <?php endif; ?>
    <p><?php echo wp_kses( $text1, array( 'br' => array(), 'em' => array(), 'strong' => array() ) ); ?></p>
</div>

To see this code in action please visit http://www.tayloredhomeinspection.com/ and scroll down to the image with the InterNACHI seal in the middle gray box and click on it (or the text below it).

The cause

There is a script tag in the header section of the HTML:

<script type="text/javascript" src="http://www.tayloredhomeinspection.com/wp-content/themes/parallax1/elements/lib/js/elements.min.js?ver=4.7.5"></script>

Inside that file is the following block (un-minified, thanks to jsbeautifier.org):

jQuery(".boxes .box").each(function() {
    var e = jQuery(this).children(".box-link").attr("href");
    jQuery(this).hover(function() {
        if (e && e != "") jQuery(this).css("cursor", "pointer")
    }, function() {
        jQuery(this).css("cursor", "default")
    });
    jQuery(this).click(function() {
        if (e && e != "") window.location = e
    })
});

That code is looking for elements (child elements of elements with class boxes and box, respectively) with class box-link and when any of those elements is clicked on, it changes the location of the current tab (by assigning a value to window.location) to the value at the href attribute of the element (with class box-link).

That link (that contains the InterNACHI seal) has class box-link and matches those CSS selectors:

<div class="boxes">
        <!-- removed first box -->

        <div class="box span4" style="cursor: default; height: 460px;">
            <a href="http://www.nachi.org/" target="_blank" class="box-link">
                <center><img class="box-image" src="./Taylored Home Inspection 719.602.6287_files/internachi_red_gold.png"></center>
            </a>

It appears that this allows the user to click anywhere in the parent container (with class="box"), for instance - on the paragraph below the link, and still have the effect of clicking on the link. See the differences between the link and paragraph illustrated in the screenshot below:

Prevention

One quick solution would be to remove that class name (i.e. box-link) from that element. However that remove desired styling... Beyond that, one might need to modify the (wordpress) JavaScript to stop changing the location if the anchor tag has a target and it was the target of the event.

Update:

If no help is found from the CyberChimp Parallax Word Press theme documentation and/or support, an alteration script could be run after the page has loaded. The code below could be added to any javascript file run after the other javascript files (including elements.min.js)), or inline in a script tag (i.e. <script type="text/javascript">jQuery(".boxes .box" ...</script>).

One could argue though that this is just a hack to cover up functionality and might suffer if the implementation in the theme code changes.

jQuery(".boxes .box").each(function() {
    var e = jQuery(this).children(".box-link").attr("href");
    var target = jQuery(this).children(".box-link").attr('target');
    if (target == '_blank') {
      jQuery(this).off('click');
    }
    jQuery(this).click(function(event) {
      if (e && e != "") {
          if (target == '_blank') {
              window.open( e, '_blank');
          }
          else { 
              window.location = e;
          }
      }
    });
  });

See a demonstration in this jsbin example

Here is the weave job I did that seems to have it working.

jQuery(window).load(function(e) {
 if (jQuery(window).width() > 767) {
  setTimeout(function() {
   jQuery("#widget_boxes_container .box").css("height", 
jQuery("#widget_boxes_container").height() - 20)
  }, 500)
 }
 jQuery(".boxes .box").each(function() {
  var e = jQuery(this).children(".box-link").attr("href");
  var target = jQuery(this).children(".box-link").attr("target");
  if (target == "_blank") {
      jQuery(this).off("click");
  }
  jQuery(this).hover(function() {
   if (e && e != "") jQuery(this).css("cursor", "pointer")
  }, function() {
   jQuery(this).css("cursor", "default")
  });
  jQuery(this).click(function(event) {
      if (e && e != "") {
          if (target == "_blank") {
              window.open( e, "_blank");
          }
          else { 
              window.location = e;
          }
      }
    });
 jQuery(".carousel").carousel("cycle")
})

It looks like I have to keep the target="_blank" in the .php file and this should work for any changes I make in the theme and I have the file saved in case of theme updates.