Home Web Front-end HTML Tutorial Share problems and solutions about adding click events in a tags

Share problems and solutions about adding click events in a tags

May 10, 2017 pm 03:16 PM

I encountered a problem yesterday when I was modifying the page jump. If the "href" attribute of the a tag is empty, for example, Modify< ;/a>, when I clicked the modification link, it did not jump to the corresponding modification page, but only refreshed this page; if it is written as , there is no response at all when clicking. Later, after discussing with colleagues, I found that it was changed to javascript:void(0)" onclick="roleupdate()">Modify, that is Adding "javascript:void(0)" or "#" to the "href" attribute can achieve page jump, so I personally think that the "href" attribute value in the "a" tag should not be empty.

In order to make it easier for everyone to learn, I have compiled several methods of using click events in the "a" tag, as shown below:

<a href="JavaScript:js_method();"</a>
Copy after login

This is on our platform A commonly used method, 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 of the window.onbeforeunload event, but also cause gif in IE The animated picture stops playing. W3C standards do not recommend executing javascript statements in href

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

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

3.<a href="javascript:;" onclick="js_method()"</a>
Copy after login

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

4.<a href="#" onclick="js_method()"</a>
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.

5.<a href="#" onclick="js_method();return false;"</a>
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 method in each href uses try. , catch surrounded.

【Related recommendations】

1. Free html online video tutorial

2. html development manual

3. php.cn original html5 video tutorial

The above is the detailed content of Share problems and solutions about adding click events in a tags. 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

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

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)

How to set up jump on layui login page How to set up jump on layui login page Apr 04, 2024 am 03:12 AM

Layui login page jump setting steps: Add jump code: Add judgment in the login form submit button click event, and jump to the specified page through window.location.href after successful login. Modify the form configuration: add a hidden input field to the form element of lay-filter="login", with the name "redirect" and the value being the target page address.

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 add touch events to pictures in vue How to add touch events to pictures in vue May 02, 2024 pm 10:21 PM

How to add click event to image in Vue? Import the Vue instance. Create a Vue instance. Add images to HTML templates. Add click events using the v-on:click directive. Define the handleClick method in the Vue instance.

Hongmeng HarmonyOS and Go language development Hongmeng HarmonyOS and Go language development Apr 08, 2024 pm 04:48 PM

Introduction to HarmonyOS and Go language development HarmonyOS is a distributed operating system developed by Huawei, and Go is a modern programming language. The combination of the two provides a powerful solution for developing distributed applications. This article will introduce how to use Go language for development in HarmonyOS, and deepen understanding through practical cases. Installation and Setup To use Go language to develop HarmonyOS applications, you need to install GoSDK and HarmonyOSSDK first. The specific steps are as follows: #Install GoSDKgogetgithub.com/golang/go#Set PATH

What is the event-driven mechanism of C++ functions in concurrent programming? What is the event-driven mechanism of C++ functions in concurrent programming? Apr 26, 2024 pm 02:15 PM

The event-driven mechanism in concurrent programming responds to external events by executing callback functions when events occur. In C++, the event-driven mechanism can be implemented with function pointers: function pointers can register callback functions to be executed when events occur. Lambda expressions can also implement event callbacks, allowing the creation of anonymous function objects. The actual case uses function pointers to implement GUI button click events, calling the callback function and printing messages when the event occurs.

Detailed explanation of JavaScript obtaining web page elements Detailed explanation of JavaScript obtaining web page elements Apr 09, 2024 pm 12:45 PM

Answer: JavaScript provides a variety of methods for obtaining web page elements, including using ids, tag names, class names, and CSS selectors. Detailed description: getElementById(id): Get elements based on unique id. getElementsByTagName(tag): Gets the element group with the specified tag name. getElementsByClassName(class): Gets the element group with the specified class name. querySelector(selector): Use CSS selector to get the first matching element. querySelectorAll(selector): Get all matches using CSS selector

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: &amp;l

Conquer the GUI world with Python Tkinter: The complete guide Conquer the GUI world with Python Tkinter: The complete guide Mar 24, 2024 am 09:26 AM

Tkinter is a powerful GUI toolkit in the Python standard library for creating cross-platform graphical user interfaces (GUIs). It is based on the Tcl/Tk toolkit and provides simple and intuitive syntax, allowing Python developers to create complex user interfaces easily and quickly. Advantages of Tkinter Cross-platform compatibility: Tkinter applications run on all major operating systems such as windows, Mac and Linux. Easy to use: Its syntax is clear and easy to learn, making it easy for both beginners and experienced developers to master. Extensibility: Tkinter provides a variety of widgets and controls, enabling developers to create a wide variety of user interfaces. Integration: It is related to P

See all articles