Multiple Solutions to trigger onclick events without redirecting from tag

During web page development, we often encounter the following situations:

1. A tag is only used to trigger the onclick action;
2. Show the pointer with the mouse or other visual effects similar to the label.
For example, to avoid misoperation during the delete operation, a dialog box is displayed asking the user to determine whether to delete the operation. Therefore, we often use the link <a> </a> instead of <button> to trigger the onclick event.
The Code is as follows:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function del (){
If (confirm ("are you sure you want to delete this record? ")){
Parent. window. location = "delete. jsp ";
Return true;
}
Return false;
}
</Script>
<A href = "" target = "mainFrame" class = "STYLE4" onclick = "del ()"> Delete </a>

The consequence of this is that the js Code will jump to the "execute Delete. jsp" page, and the <a> tag will jump to open an empty page. Because html itself processes the href attribute of the <a> tag, we will first execute our own defined method and then run its own method (jump Method ).

There are four solutions:
1. Do not use the tag, set css or use js for presentation (a bit complicated );
2. Use the tag, The onclick attribute, or The onclick event to return false)
For example, <a href = "" target = "mainFrame" class = "STYLE4" onclick = "del (); return false"> Delete </a>
This is an issue about the execution sequence. <a> the execution sequence of this label should be the onclick script first, and the page Jump specified by the href parameter is finally executed. If false is returned in onclick, the workflow of the <a> label can be aborted, that is, the page is not redirected to the page specified by the href parameter.
3. Use the pseudo-Protocol href = "javascript: void (0)". (This pseudo-protocol is not well written)
That is, <a href = "javascript: void (0)" target = "mainFrame" class = "STYLE4" onclick = "del ()"> Delete </a>
4. <a href = "#" class = "STYLE4" onclick = "del ()"> Delete </a>. (Always jump to the top of the current page. When there is a large amount of content on the page, there will still be a jump feeling)