单击链接后，JavaScript停留在页面上

Question

I have a question , this is my code :

<a href="Webshop.php" class="Button" onclick="myFunction()">Webshop</a>

<script>
    function myFunction() {
        var r = confirm("If you leave this page your purchase will be gone!");
        if (r == true) {
            window.location = "http://www.titansafes.sgr15.g-o.be/Webshop.php";
        } else {
            return
        }
    }
</script>

If you click on the button I get the alert , if they click ok , they direct back to the webshop , if they click cancel , they need to stay on the page. But how can I do that best? I tried Window.location ( doesn't work ), return doesn't work , and it's quite important for me.

Answer 1

<a href="Webshop.php" class="Button" onclick="myFunction();return false;">Webshop</a>

<script>
    function myFunction() {
        var r = confirm("If you leave this page your purchase will be gone!");
 if (r == true) {
            window.location = "http://www.titansafes.sgr15.g-o.be/Webshop.php";
        } else {
        }
    }
</script>

Answer 2

<a href="javascript:void(0)" class="Button" onclick="myFunction()">Webshop</a>

Answer 3

`<a href="Webshop.php" class="Button" onclick="myFunction()">Webshop</a>
<script>
function myFunction(event)
{
 event.preventDefault();
var r=confirm("If you leave this page your purchase will be gone!");
if (r==true)
{
window.location ="http://www.titansafes.sgr15.g-o.be/Webshop.php";
}

}
</script>`

Answer 4

It's better not to use return false; but instead in the event handler function call the preventDefault method on the event object argument that is being passed to it. The event object is the single argument that's passed to every event handler function. Two important methods on it are the preventDefault, which stop the default event action (in this case the navigation, as it's a link. The second important method is the stopPropagation which will stop the event from being triggered on parent elements. Using return false will actually do both, which isn't nesecerally what you want, it's important to know when to use what: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

So your handler should look something like this (adding the preventDefault):

function myFunction(eventObject) {
    eventObject.preventDefault();
    var r=confirm("If you leave this page your purchase will be gone!");
    if (r==true) {
        window.location ="http://www.titansafes.sgr15.g-o.be/Webshop.php";
    }
}

Also, as a side note, try to avoid inline events like: onclick="CODE" instead use the: element.addEventListener() method and it's IE8 and older alternatives. http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/