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

Vue makes a simple random roll call

Table of contents Layout part: <div id="a...

Seven Principles of a Skilled Designer (2): Color Usage

<br />Previous article: Seven Principles of ...

Use JS to operate files (FileReader reads --node's fs)

Table of contents JS reads file FileReader docume...

Some suggestions on Vue code readability

Table of contents 1. Make good use of components ...

How to represent various MOUSE shapes

<a href="http://" style="cursor...

A must-read career plan for web design practitioners

Original article, please indicate the author and ...

Examples of clearfix and clear

This article mainly explains how to use clearfix a...

Tutorial on how to quickly deploy clickhouse using docker-compose

ClickHouse is an open source column-oriented DBMS...

foreman ubuntu16 quick installation

Quickstart Guide The Foreman installer is a colle...

Nodejs global variables and global objects knowledge points and usage details

1. Global Object All modules can be called 1) glo...

Detailed explanation of Docker daemon security configuration items

Table of contents 1. Test environment 1.1 Install...

Record a pitfall of MySQL update statement update

background Recently, I executed a DML statement d...

Create an SSL certificate that can be used in nginx and IIS

Table of contents Creating an SSL Certificate 1. ...