a tag triggers onclick event without jumping

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

1. A label only needs to trigger onclick behavior;

2. The performance must have a mouse pointer display, or other visual effects similar to a label .

For example, when performing a delete operation, in order to avoid misoperation, we need to pop up a dialog box to let the user confirm whether to delete. Therefore, we often use the link instead of to trigger the onclick event.

The code is as follows:

<script type="text/javascript">
function del(){
if(confirm("确定删除该记录？")){
parent.window.location="执行删除.jsp";
return true;
}
return false;
}
</script>
<a href=""  target="mainFrame" onclick="del()" >删除</a>

Copy after login

The consequence of this is that the js code will jump to the "Execute Delete.jsp" page, and the tag will also jump to open an empty page. Because HTML itself processes the href attribute of the tag, it will first execute our own defined method, and then run its own method (jump method).

There are four main solutions, as follows:

1. Don’t use a tag, set css or use js to express it (a bit complicated);

2. Use a tag, onclick attribute or return false in onclick event ;(Personal favorite)

For example: Delete

This is a question of execution order,< a>The execution order of this tag should be to execute the onclick script first, and then jump to the page specified by the href parameter last. By returning false in onclick, you can abort the workflow of the tag, that is, prevent the page from jumping to the page specified by the href parameter.

3. Use a pseudo-protocol like href="javascript:void(0)"; (this kind of pseudo-protocol should be written less often)
That is: delete

4. delete. (Always jump to the top of the current page. When the page has a lot of content, it will still feel like jumping)

Other knowledge:

The following code creates a hyperlink, and the user will submit the form when clicking. Submit form here

The # in href="#" in the a tag is the anchor point The meaning of can also be considered as the current page

The following is how to use the anchor:

<!-- 定义一个锚。 -->
<a name="anchor">锚点</a>
<!-- 本页面的一个连接,连接到锚: -->
<a href="#anchor">锚</a>

Copy after login

The effect is: click the anchor to go to the anchor paragraph.