Home Web Front-end JS Tutorial How a tag calls JavaScript

How a tag calls JavaScript

May 16, 2018 am 10:44 AM
javascript

This article mainly introduces to you the relevant information about how the a tag calls JavaScript. The article introduces it in great detail through sample code. It has certain reference and learning value for everyone. I hope it can help everyone.

We commonly use click events in the a tag:
                                       A relative or absolute URL to a valid document, including fragment identifiers and JavaScript snippets.

## The href="javascript:;" here, where javascript: is a pseudo-protocol, allows us to call javascript functions through a link. In this way javascript: ;When the click event of the A tag is running, if the page contains a lot of content and there is a scroll bar, the page will not jump around and the user experience will be better

1.

a href="javascript:js_method();"
Copy after login

This is a commonly used method on our platform, but this method is prone to problems when passing parameters such as this, and when the javascript: protocol is used as the href attribute of a, it will not only cause unnecessary Triggering the window.onbeforeunload event will stop the GIF animated image from playing in IE. W3C standards do not recommend executing javascript statements in href

2.

a href="javascript:void(0);" onclick="js_method()"
Copy after login

This method is the most commonly used method on many websites and is also the most common. A comprehensive method, the onclick method is responsible for executing the js function, and void is an operator. void(0) returns undefined, and the address does not jump. And this method does not directly expose the js method to the status bar of the browser like the first method.

3.

a href="javascript:;" onclick="js_method()"
Copy after login

This method is similar to the 2 methods, the only difference is that an empty js code is executed.
4.

a href="#" onclick="js_method()"
Copy after login

This method is also a very common code on the Internet. # is a method built into the tag, representing the role of top. So using this method to click on the web page returns to the top of the page. If the page has a scroll bar, click it and the page will return to the top of the page

##5.

a href="#" onclick="js_method();return false;"
Copy after login

This method returns false after clicking to execute the js function. The page will not jump and it will still be at the current position of the page after execution.

I took a look at taobao’s homepage. They use the second method, while alibaba’s homepage uses the first method. The difference from ours is that the javascript methods in each href are surrounded by try and catch. . Based on the above, the most appropriate method to call js functions in a is recommended:


a href="javascript:void(0);" onclick="js_method()"
a href="javascript:;" onclick="js_method()"
a href="#" onclick="js_method();return false;"
Copy after login

Related recommendations:

Several methods of calling js in a tag

Summary of click events for calling js function in a tag

## Several methods of calling javascript methods in a tags and window.open()

The above is the detailed content of How a tag calls JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What file is index.html? What file is index.html? Feb 19, 2024 pm 01:36 PM

index.html represents the home page file of the web page and is the default page of the website. When a user visits a website, the index.html page is usually loaded first. HTML (HypertextMarkupLanguage) is a markup language used to create web pages, and index.html is also an HTML file. It contains the structure and content of a web page, as well as tags and elements used for formatting and layout. Here is an example index.html code: &lt

How to remove the color of a tag in css How to remove the color of a tag in css Apr 25, 2024 pm 05:42 PM

To remove the inherent color of the a tag, you can use the following method: Use the CSS color property to specify the text color. Use the CSS link-color property to specify link color. Use the CSS text-decoration property to remove underline and default text color. Use the CSS hover color property to change the text color on mouseover. Use the CSS visited color property to change the text color of visited a tags.

How to implement PHP code to jump to a specified page How to implement PHP code to jump to a specified page Mar 07, 2024 pm 02:18 PM

When writing a website or application, you often encounter the need to jump to a specific page. In PHP, we can achieve page jump through several methods. Below I will demonstrate three common jump methods for you, including using the header() function, using JavaScript code, and using meta tags. Using the header() function The header() function is a function used in PHP to send original HTTP header information. This function can be used in combination when implementing page jumps. Below is a

How to implement page jump in 3 seconds: PHP Programming Guide How to implement page jump in 3 seconds: PHP Programming Guide Mar 25, 2024 am 10:42 AM

Title: Implementation method of page jump in 3 seconds: PHP Programming Guide In web development, page jump is a common operation. Generally, we use meta tags in HTML or JavaScript methods to jump to pages. However, in some specific cases, we need to perform page jumps on the server side. This article will introduce how to use PHP programming to implement a function that automatically jumps to a specified page within 3 seconds, and will also give specific code examples. The basic principle of page jump using PHP. PHP is a kind of

What should I do if the PHP web page has Chinese garbled characters? A complete solution What should I do if the PHP web page has Chinese garbled characters? A complete solution Mar 26, 2024 pm 03:27 PM

The problem of Chinese garbled characters in PHP web pages is that Chinese characters are displayed as garbled characters in the web page display. This situation is usually caused by inconsistent encoding or the character set is not set. Solving the problem of Chinese garbled characters in PHP web pages requires starting from many aspects. The following are some common solutions and specific code examples. Set the PHP file encoding: First make sure that the encoding of the PHP file itself is UTF-8. You can set the UTF-8 encoding when saving in the editor, or add the following code to the header of the PHP file to set the encoding: &l

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

jQuery Tips: Quickly modify the text of all a tags on the page jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: &lt

Use jQuery to modify the text content of all a tags Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on ​​the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

See all articles