A label triggers the onclick event without jumping to a variety of solutions

When you develop Web pages, we often experience the following situations:

1. A label is only to trigger the onclick behavior;
2. Performance should have the mouse pointer pointer display, or other similar to a label visual effects.
For example, in order to avoid misoperation when performing a delete operation, we will pop up a dialog box to let the user know whether to delete it or not. Therefore, we often use links <a></a> forms instead of <button> to trigger the onclick event.
The code is as follows:

Copy Code code as follows:


&lt;script type= "Text/javascript" &gt;


function del () {


if (confirm) (OK to delete this record?) ")){


parent.window.location= "execute delete. jsp";


return true;


}


return false;


}


&lt;/script&gt;


&lt;a href= "" target= "MainFrame" class= "STYLE4" onclick= "del ()" &gt; Delete &lt;/a&gt;

The consequence of this is that the JS code jumps to the "execute delete. JSP" page and the <a> tab jumps to open an empty page. Because HTML itself deals with the href attribute of the <a> tag, it executes the method we define itself, then runs its own method (the method of jumping). There are four main solutions for

, as follows:
1. Do not use a label, set CSS or use JS to perform (a bit complex);
2. Returns false with a label, onclick property, or onclick event; Personal likes)
such as: <a href= "" target= "MainFrame" class= "STYLE4" onclick= "Del (); return false" > delete </a>
It's a matter of execution order.,<a> the order of execution of the label should be to execute the onclick script first, and then the href parameter to specify the page jump. If you return false in OnClick, you can abort the workflow of the <a> label, that is, not allow the page to jump to the page specified by the href parameter.
3. Use href= "javascript:void (0)" as a pseudo protocol; (this pseudo protocol, write less well)
namely: <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)