Example of using the href attribute and onclick event of a tag

Example of using the href attribute and onclick event of a tag

The a tag is mainly used to implement page jump, which can be achieved through the href attribute or in the onclick event.

Copy code
The code is as follows:

<a onclick="window.location.href='www.jb51.net'" href="javascript:void(0);">123WORDPRESS.COM</a>

This code works fine in mainstream browsers, but it will not jump in IE6. What is the reason for this?

Copy code
The code is as follows:

javascript:void(0);

void(arg); can be understood as a function that always returns null, but its parameter cannot be empty. Its parameters can be any expression or even function.

Copy code
The code is as follows:

<a href="javascript:void(name = '123WORDPRESS.COM'); alert(name);">Test</a>

test

IE6 first runs the events bound to the DOM itself, such as onclick; if bubbling is not prevented, the href attributes will be executed sequentially. And void(0); does not need to execute any event, so IE6 tells the browser not to execute any event (overwriting the previous action), and terminating the bubbling is equivalent to return false; so the browser does not execute any action. So just prevent the bubbling event within the onclick event.

Copy code
The code is as follows:

<a onclick="window.location.href='https://www.jb51.net';return false;" href="javascript:void(0);">123WORDPRESS.COM</a>

This will run normally under IE6.

Another way is to use # instead of javascript:void(0);. The # in the href attribute originally means the anchor#name, so when no anchor is specified, it will go to the top of the page. # has a specific meaning. The default is #top. If there is content after #, it will be considered a tag and the corresponding tag will be found on the page to jump to that place. If it is not found, it will jump to the top of the page. If you don't want to jump, you can use ###. ### is a meaningless tag specification.

<<:  Detailed explanation of padding and abbreviations within the CSS box model

>>:  The most comprehensive explanation of the locking mechanism in MySQL

Recommend

Detailed explanation of component communication in react

Table of contents Parent component communicates w...

CSS optimization skills self-practice experience

1. Use css sprites. The advantage is that the smal...

How does JS understand data URLs?

Table of contents Overview Getting started with d...

Analyze Mysql transactions and data consistency processing issues

This article analyzes the consistency processing ...

Use Typescript configuration steps in Vue

Table of contents 1. TypeScript is introduced int...

Practical solution for Prometheus container deployment

environment Hostname IP address Serve Prometheus ...

How to prevent duplicate submission in jquery project

In new projects, axios can prevent duplicate subm...

Page Speed ​​Optimization at a Glance

I believe that the Internet has become an increas...

Use a diagram to explain what Web2.0 is

Nowadays we often talk about Web2.0, so what is W...

Some methods to optimize query speed when MySQL processes massive data

In the actual projects I participated in, I found...

Why is it not recommended to use index as the key attribute value in Vue?

Table of contents Preface The role of key The rol...

How to restore data using binlog in mysql5.7

Step 1: Ensure that MySQL has binlog enabled show...