函数onclick可以打开新链接，而不能转到原始链接

Question

I have a href tag with a link to another page.

 <a name="mylink" class="mylink" href="path-to-new-page.html">Link to new page</a>

What I am trying to achieve here is that when the user clicks on the link, a onclick event is triggered. something like a return confirm.

onclick="return confirm('would you like to see our help center first?')"

If the user clicks "YES", then he is redirected to the help.html page.

If he clicks on "NO", he is sent to the link of the original href .

Must I use jquery for this with a popup window instead of a alert box?

Answer 1

To answer your second question first, you do not have to, as you can get the result of the alert box inline in your Javascript.

As for the onclick on the <a> tag, that sounds exactly like a button. Same syntax as a link except you would do something like this:

<button onclick='myFunction()'>Click Here</button>

Then your javascript would look like:

function myFunction(){
    if(confirm("Would you like to see our help center first?")){
        // what happens if they select yes //
        document.href.location = "helpcenter.html";
    }else{
        // what happens if they select no //
        document.href.location = "linktarget.html";
    }
}

Where, of course, helpcenter.html is your Help Center, and linktarget.html is the original target URL of the link.

confirm() just returns a boolean on whether they pressed okay ( true ) or cancel or the x at the top of the dialog ( false ), and document.href.location is exactly the same as saying <a href='

Answer 2

Disclaimer: I used personal URLs for this demo, they may vanish in the future, but their names should still be easy to understand.

Without jQuery

 var links = document.getElementsByClassName('myLink'); for(var i=0, l=links.length; i<l; i++){ links[i].addEventListener('click', function(e){ var goToHelpCenter = confirm('Would you like to see our help center first?'); if(goToHelpCenter){ // Prevent the link from going to its default href e.preventDefault(); // Go to help center window.location.href = 'http://shrt.tf/help-center.html'; } // Otherwise, do nothing. }); } 

 <a class="myLink" href="http://shrt.tf/page.html">Click me</a> 

jQuery version

 $('.myLink').click(function(e){ var goToHelpCenter = confirm('Would you like to see our help center first?'); if(goToHelpCenter){ // Prevent the link from going to its default href e.preventDefault(); // Go to help center window.location.href = 'http://shrt.tf/help-center.html'; } // Otherwise, do nothing. }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a class="myLink" href="http://shrt.tf/page.html">Click me</a>