href 目标 _blank 无法正常工作 - 未在新选项卡中打开链接，javascript 以不同方式处理事件

Question

I'm having a problem with a href target _blank on my website.

I cannot determine why it is not opening the link in a new tab, https://miwebstudio.com in the section: LATEST PROJECTS > Boranito skat and others, in fact, is instead opening the link in the same tab... can someone explore my website and tell me what is happening and how to solve it? I think it does have to be something with the JS but I am not able to find the problem in the Javascript code since I am a javascript rookie and cannot understand properly what the javascript code here does...

from what I have understood due to previous google and StackOverflow research and behavior watching, it is because javascript is handling the event target _blank in a different way, in fact, javascript here is being used for website change( i mean every click you do on the menu, some divs appears, some divs disappears and it is being handled by 3 js classes), already examined the JS files, clicked right-click, used element inspector> elements> event listeners>click event to see which JS files are being triggered while clicking...

see here detailed image

as you can see, two javascript archives are executing while doing the click event:

1: `jquery.pagepiling.min.js. //// 2: animsition.js`

3: scripts.js

so apparently both javascript classes are handling the events: on click, but since I am a newbie in javascript I cannot understand how to handle this or even understand what the JS does to the website ( i am just tinkering with the given template to try to understand it and to customize it better, (and hence, make the target _blank work properly( as exposed before, while clicking the link, it opens the link in the same page) so I come here for some support of you

Here is the code snippet for you to be able to locate easily inside my website the code while using the code explorer in chrome:

<a href="project-detail.html" target="_blank" class="project-box">
<div class="project-box-inner">
<h5>Boranito<br>Skat</h5>
<div class="project-category">House Design</div>
</div>
</a>

however, will leave the javascript source files here since I am requested to give all possible details here to avoid users being in the need of accessing my website my website , here are all the 3 javascript classes handling all the template events which I don't know what they do: (since I am not able to attach the source code of the javascript classes, I will attach a link for each js file so you could check it, thanks in forward.....

1: animsition.js

2:

jquery.pagepiling.min.js

3:

scripts.js

Thank you in advance.

Answer 1

Problem

Your script (scripts.js) on line 13 toggle animsition's feature for links: linkElement: "a.project-box" . This will add an handler to every a element with a project-box class. The handler is the following code (I've commented for your understanding):

function(event) {
  event.preventDefault(); // prevent the default behavior for links (prevent the behavior you want)
  var $self = $(this);
  var url = $self.attr('href'); // get the url of the link
  if (event.which === 2 || event.metaKey || event.shiftKey || navigator.platform.toUpperCase().indexOf('WIN') !== -1 && event.ctrlKey) {
    // open the link in a new tab ONLY IF I clicked on it with the middle mouse button or with Ctrl/Cmd pressed
    window.open(url, '_blank');
  } else {
    // Else do the animation and open the link in the same tab
    __.out.call(_this, $self, url);
  }
}

Fix

To fix your problem, you can either

• Change the way you setup Animsition, be aware that it can modify other links/behaviors in your site
• Change the class of your link so it is not matched as the linkElement of your Animsition's setup. For example: remove the class of the a element (it will affect the styling) and you will see that the link opens in a new tab.

Appendix

You can find the handler's code in the devtools -> your link element -> handlers -> click.