Home  >  Article  >  Web Front-end  >  Detailed explanation of how to use onclick and href in the a tag in HTML

Detailed explanation of how to use onclick and href in the a tag in HTML

高洛峰
高洛峰Original
2017-03-20 16:59:532882browse

onclick

The onclick event of the link is executed first, followed by the action under the href attribute (page jump, or javascript pseudo link);
Assume that href also exists in the link With onclick, if you want the action under the href attribute not to be executed, onclick must get a false return value. If you don’t believe it, you can remove return false Comment in goGoogle Function;
If the page is too long and has a scroll bar, and you want to pass the onclick event of the link Perform actions. Its href attribute should be set to javascript:void(0); instead of #, which can prevent unnecessary page jumps;
If a function with a return value is called in the href attribute of the link , the content of the current page will be replaced by the return value of this function;
will be different when holding down the Shift key.
The problem I encountered today is that I cannot access parentNode in the form of href in IE6.0.
Try not to use javascript: protocol as the href attribute of A. This will not only cause unnecessary triggering of the window.onbeforeunload event, but also cause gifanimation in IEPicture Stop playing
The following is what I encountered:
If you do not set the href attribute, IE6 will not respond to hover. After double-clicking, the parent container of the label will be selected instead of the a label (this problem exists under IE).
Suppose we have a fn method and need to get this element. The first method is passed in The this is a null value.
So, the more recommended way of writing is

The following code executes the subgo() function,
< ;a href="javascript:void(0)" onclick="subgo()">Click me

Here, javascript:void(0) has no actual function, it just It is a dead link, and the function executed is subgo().
Click meandClick meDifference.
In fact #contains a location information. The default anchor is #top, which is the top of the web page, and javascript:void(0) only represents a dead link without any information. Therefore, it is best to use void(0) when calling a script
href generally points to a URL address, or you can call javascript, such as href="javascript:xxx();", it is recommended to write like this in the document: xx, but this method sometimes produces strange results in complex environments Regarding the problem, try not to use the javascript: protocol as the href attribute of A. This will not only cause the window.onbeforeunload event to be triggered unnecessarily, but will also stop the GIF animated image from playing in IE.
We know that the onclick event of the link is executed first, followed by the action under the href attribute (page jump, or javascript pseudo link). If you do not want to execute the action under the href attribute, onclick needs to return false. This is generally the case. Write onclick="xxx();return false;".
TabPane's JS source code, because onclick does not return FALSE, when TABPANE is closed in IFRMAE, it will cause href execution and page display problems. The solution is to copy the following code into the JSP using TAB.
-------------------------------------------------- -------------------------------------------------- ------------------------------------------
As for what other buildings said【 In IE8, such as: "javascript:;", "javascript:void(0)", "javascript:void(null)" are all rejected] because there is no installationIE8, no Dare to jump to conclusions.
-------------------------------------------------- -------------------------------------------------- ------------------------------------------
If it is indeed true in practical applications The tag is used to respond to the onclick event.
Then it is recommended to use the following three methods
1.
test
2.< a href="http://blog.163.com/wb_zhaoyuwei/blog/" onclick="doSomething();return false">test
3.test
---- -------------------------------------------------- -----------------------------------------------
Hyperlink< The ;a> mark represents a link point and is the abbreviation of English anchor (anchor). Its function is to connect the text or pictures at the current location to other pages, texts or images. This is well known, but its grammatical structure may be a little unknown, and to use it you must understand its grammatical structure. . The basic syntax structure of the tag is:
class=type
id=value
href=reference
name=value
rel=same|
next|parent|previous
rev=value
target=window
style=value
title=title
onclick=function
onmouseout=function
onMouseOver=function>Connect
As can be seen from the syntax structure of the tag, there are many parameters to set when setting a hyperlink. There are options to achieve different link effects, which is a bit unexpected, right? !
 The class and id options: used to set the type of the link point and the assigned ID number, usually not set. The two most commonly used parameters are href and name. href is the abbreviation of hypertext reference, which is used to set the link address. The link address must be a url address. If no specific path is given, the default path will be the same as the path of the current page. The files linked to are also divided into several situations: if it is an HTML file, it will be opened directly in the current browser; if it is an executable file (.exe file), it will be directly executed or downloaded. The file we provide for download is used. This feature is used; if it is a text file such as a word format file, the file can be opened in the browser and can be edited and processed.
rel: Indicates setting the link relationship: rel=same means that the file to be linked is the same as this file, rel=next means that the file to be linked is the next page, rel=parent means that this file is the parent of the file to be linked. file, rel=previous means that the file to be linked is the previous page.
rev: used to set reverse links.
Target: Sets which window to link to when using a frame window, and target="_bank" means opening a new window to open the web page.
Title: used to set the title displayed when the link point is selected.
 onclick: Corresponds to an event. When the link point is clicked, this event will be triggered and the corresponding subroutine will be executed.
Onmouseover: Similar to onclick, the corresponding event is triggered when the mouse moves to the link point.
 onmouseout: The corresponding event is triggered after the mouse moves out of the contact point.
 A few examples:
Back to homepage
< a href="http://blog.163.com/wb_zhaoyuwei/blog/sound.wav">Play voice file
Execute the corresponding program
document.doc">Open the corresponding document for processing< ;/a>
Application skills
1. Provide download files
Many netizens have written to ask how to provide the download effect. In fact, it is still a hyperlink, but the file for download must be uploaded to the website. For example: There is a "web page skills" file package for download. The file name is "homepagejq.zip" and has been uploaded to the website. The code for this link can be written like this: Click here to download the "Web Page Skills" file package.
 2. Open the linked web page in a new window
Set the value of "target" to "_blank". Example: Open the web page "aboutme.htm" in a new window. The code that produces this effect is: About me... 3. Move the mouse to the link and display a line of description text
Set the "title" parameter value to obtain this effect. For example: When the mouse moves over the link "Huangshan Villager", the description "This is a professional website introducing web page production skills" is displayed. The code of this link is like this:
Huangshan Village husband.
4. Move the mouse to a link and a window will pop up
This is the effect obtained by setting the onmouseover parameter. Example: When the mouse moves over a link, a window pops up and displays "Mouse hover effect demonstration!" in the window. The code of this link is like this: Link. A similar method can be used to create the effect of a prompt window popping up when the mouse is pressed and a prompt window popping up when the mouse is left.
5. Link to the specified content of this page
To achieve a link to a certain part of the content of this page (that is, "jump within the file"), you must use the parameter name to specify the name of the link point. Select a piece of text and name it with the name parameter for linking. The so-called jump within the same file means that when a reader is reading a very long file, if he is only interested in a certain part of the content, he can use a jumping reading method. The basic format is:
Part 2The content of the first part...
... .............................
< ;/a>The actual content of the second part......
........................ ...........
In this way, when you click on the hyperlink "Part 2", you will automatically be transferred to the "Actual Content of Part 2" place. The link point name defined by the "name" parameter can be chosen arbitrarily, but the link point name in the "href" parameter of the link must be consistent with it. Don't forget to add "#" in front.
6. Link to the specified content location of other pages
The method is similar to the above example, but the file name of the web page must be added before the link point name in the "href" parameter. Example: There are two web pages, page1.htm and page2.htm. Each page has two parts of content. Now we need to create a hyperlink in page1.htm. When the link is clicked, it will go to the second part of page2.htm. superior. Then we can do this, first write this code at the beginning of the second part of page2.htm:
; write this in page1.htm A link code: The second part of page2.
7. Link to E_mail
After clicking a hyperlink, the email management software on the client computer will be launched to write you a letter. For example, this line of code: Please write to me. Once you click on the link "Please write to me", the writing function of the email management software (such as OE) will be automatically launched, and the email address will be added to the address bar of the recipient.
Links can not only use text as the carrier, but also images as the carrier, and can also use a certain part of the picture as the carrier, and can achieve the above effects. The method is also the same, the only difference is the carrier, that is, the link The part between the two square brackets, so I won’t give another example.

The above is the detailed content of Detailed explanation of how to use onclick and href in the a tag in HTML. For more information, please follow other related articles on the PHP Chinese website!

Statement:
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