break a href link event

Question

I search a method to break the process after click a html a element. It is possible to make a onclick="alert();" event on this a element and the process is temporary stopped, till the OK button is clicked, or the process is breaked, when the page are reloaded or click previous page. Also the break is, but not perfect. With a confirm() it is similare, but by clicking "Cancel" the process is not canceled.

function myFunction() {
  var confirmresult = confirm("Press a button!");
  if (confirmresult === true) {
    // OK = go away!
  } else {
    // Cancel = stay here!
  }
}

<!DOCTYPE html>
<html>
<body>
<a href="https://www.example.com" onclick="myFunction()" target="_blank" rel="nofollow">example.com</a>
</body>
</html>

The example don't work by me. Here the code:

<!DOCTYPE html>
<html>
<body>
<a href="https://www.example.com" onclick="myFunction()" target="_blank" rel="nofollow">example.com</a>
<script>
function myFunction() {
  var confirmresult = confirm("Press a button!");
  if (confirmresult === true) {
    // OK = go away!
  } else {
    // Cancel = stay here!
  }
}
</script>
</body>
</html>

If you're not actually going to change locations, then don't use an `` element. Use a ` — Josh, Dec 08 '22 at 20:34
Does this answer your question? [How to display a confirmation dialog when clicking an link?](https://stackoverflow.com/questions/10462839/how-to-display-a-confirmation-dialog-when-clicking-an-a-link) — pilchard, Dec 08 '22 at 20:35
That said, `event.preventDefault()` is how you stop a native HTML element from doing something. https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault — Josh, Dec 08 '22 at 20:36
also: [Display confirmation popup with JavaScript upon clicking on a link](https://stackoverflow.com/questions/293648/display-confirmation-popup-with-javascript-upon-clicking-on-a-link) @Josh this functionality is semantic and built into the language, the link is still a link, it just has a condition applied to it. — pilchard, Dec 08 '22 at 20:38
Can you please post an example with `event.preventDefault()`? I don't understand it. A a href is a JS event? — Malama, Dec 08 '22 at 21:19
@pilchard @Josh OK. Thanks. It is possible that the `preventDefault()` methode only works with `addEventListener`? I have testet it with `onclick="myFunction()"` and it don't works. I needed it with `onclick="myFunction()"` why this is already exist. — Malama, Dec 08 '22 at 22:03
@Malama, you have to pass `event` as a parameter for `event.preventDefault()` to work. For example: `onclick="myFunction(event)"`. I prefer event listeners, but onclick works okay. — Josh, Dec 12 '22 at 16:36

Malama · Answer 1 · 2022-12-10T14:56:03.537

I have found a solution, but im not secure is it valide. Pleas help!

There is not so easy why the people think.

The thing is, it should be a solution for existing websites. No new coding is needed. Only insert the function myFunction(). onclick="myFunction()" is always present. And its only possible to put JS code in the head (not in the footer), because for this a custom <script> is always loaded via PHP in the webpages.

First, a methode with only code a new function with javascript:void(0);

The running code snippet function here don't work by me. Below a JSFiddle.

function myFunction() {
  var confirmresult = confirm("Press a button!");
  if (confirmresult === true) {
    // OK = go away!
  } else {
    // Cancel = stay here!
    document.getElementById("demo").removeAttribute("target");
    document.getElementById("demo").href = "javascript:void(0);";
  }
}

<!DOCTYPE html>
<html>
<body>
<a id="demo" href="https://www.example.com" onclick="myFunction()" target="_blank" rel="nofollow">example.com</a>
</body>
</html>

The code:

<!DOCTYPE html>
<html>
<body>
<a id="demo" href="https://www.example.com" onclick="myFunction()" target="_blank" rel="nofollow">example.com</a>
<script>
function myFunction() {
  var confirmresult = confirm("Press a button!");
  if (confirmresult === true) {
    // OK = go away!
  } else {
    // Cancel = stay here!
    document.getElementById("demo").removeAttribute("target");
    document.getElementById("demo").href = "javascript:void(0);";
  }
}
</script>
</body>
</html>

JSFiddle: https://jsfiddle.net/dLp8qtcm/

Second, a solution with preventDefault(). Consider the event instead a this. For this a edit of the webpages is needed for inside the event in onclick="myFunction(event)".

Thanks for the hints with the preventDefault(), but the examples in the answers don't work by me. Here is a working solution.

The running code snippet function here don't work by me. Below a JSFiddle.

function myFunction(e) {
  var confirmresult = confirm("Press a button!");
  if (confirmresult == true) {
    // OK = go away!
  } else {
    // Cancel = stay here!
      e.preventDefault();
  }
};

<a href="https://www.example.com" onclick="myFunction(event)" target="_blank" rel="nofollow">example.com</a>

<a href="https://www.example.com" onclick="myFunction(event)" target="_blank" rel="nofollow">example.com</a>
<script>
function myFunction(e) {
  var confirmresult = confirm("Press a button!");
  if (confirmresult == true) {
    // OK = go away!
  } else {
    // Cancel = stay here!
    e.preventDefault();
  }
};
</script>

JSFiddle: https://jsfiddle.net/osanthdq/

EDIT: The matter is a little bit complex. I have explained it here: Event keyword in js

Did you try the [suggestion](https://stackoverflow.com/questions/74735962/break-a-href-link-event#comment131902427_74735962) by @pilchard? `example.com` — Bl4ckbird, Dec 08 '22 at 22:10
Thanks, but puh ... , that's not so easy for me with JS code in the `onclick=""`. The website is always running and have a `onclick="myfunction()"`. With a simple search and replace i can modifying it to one of the solution above. But, the `onclick="myFunction(event)"` is always not so easy, because the `event`. ... i must think about it ... — Malama, Dec 08 '22 at 22:18

break a href link event

1 Answers1