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

零下一度
Release: 2017-05-10 15:16:39
Original
2980 people have browsed it

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!

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template