How to prevent hyperlink redirection using JavaScript (multiple ways of writing)

Through JavaScript, we can prevent hyperlinks from jumping.

Here’s how:

(1) Manipulating the href attribute of a hyperlink

Writing method 1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="javascript:void(0);" rel="external nofollow" >Hyperlink</a>
</body>
</html>

Writing method 2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="javascript:;" rel="external nofollow" >Hyperlink</a>
</body>
</html>

Clicking the link does not redirect.

(2) Default behavior of blocking links

Writing method 1:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<a href="https://www.baidu.com" rel="external nofollow" rel="external nofollow" >Baidu</a>
	<script>
		var link = document.querySelector("a");
		link.addEventListener('click',function(e){
			e.preventDefault();
		})
	</script>
</body>
</html>

Writing method 2:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<a href="https://www.baidu.com" rel="external nofollow" rel="external nofollow" >Baidu</a>
	<script>
		var link = document.querySelector("a");
		link.onclick = function (e) {
			return false;
		}
	</script>
</body>
</html>

At this time, clicking the hyperlink will not jump.

The above is the details of how to use JavaScript to prevent hyperlink jumps (various writing methods). For more information about js hyperlink jumps, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

Solution to the problem of Chinese garbled characters in hyperlink jumps between pages in JS
How to disable hyperlink redirect in javascript
How to get the absolute URL address of a hyperlink using JavaScript
How to correctly call a javascript function with a hyperlink
Four forms of parameter passing - URL, hyperlink, js, form
How to handle the default event of a tag hyperlink in javascript
js implements the method of submitting form with a tag hyperlink

<<: Tutorial on installing Android Studio on Ubuntu 19 and below

>>: Summary of tips for setting the maximum number of connections in MySQL