A label multiple workarounds for triggering an onclick event without jumping

A label multiple workarounds for triggering an onclick event without jumping

A tag is simply to trigger the onclick behavior, and no jump is encountered when a tag triggers the onclick event:

When developing Web pages, we often encounter the following situations:

1. A label is only to trigger the onclick behavior;
2. Display the pointer pointer of the mouse, or other visual effects like a-tag.
For example, when performing a delete operation, in order to avoid misoperation, we will pop up a dialog to let the user determine whether to delete. Therefore we often use the link <a></a> form instead of <button> to trigger the onclick event.

<script type= "Text/javascript" >
Function del () {
if (Confirm ("OK" to delete the record? ")){
Parent.window.location= "execute 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 jumps to the "execute delete. JSP" page, and the <a> tag jumps to open an empty page. Because HTML itself deals with the href attribute of the <a> tag, it executes the method of our own definition and then runs its own method (the method of jumping).

There are four main solutions, as follows:
1. Do not use a tag, set CSS or with JS to express (a bit complex);
2. Return false with a tag, onclick attribute, or onclick event; (personal preference)
such as: <a href= "" target= "MainFrame" class= "STYLE4" onclick= "Del (); return false" > delete </a>
This is a question of execution order,<a> the execution order of this tag should be to execute the onclick script first, then the href parameter to specify the page jump. Returning false in the onclick allows you to abort the workflow of the <a> tag, which means that the page is not redirected to the page specified by the href parameter.
3. Use href= "javascript:void (0)" This pseudo-protocol, (this pseudo-protocol, less write good)
i.e.: <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 the page content is more, there will be a jump feeling)

A label multiple workarounds for triggering an onclick event without jumping