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 3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed instead of bb9345e55eb71822850ff156dfde57c8 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>

The consequence of this is that the js code will jump to the "Execute Delete.jsp" page, and the 3499910bf9dac5ae3c52d5ede7383485 tag will also jump to open an empty page. Because HTML itself processes the href attribute of the 3499910bf9dac5ae3c52d5ede7383485 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: 2241a8fa7ebe4510dd0333e18e986744Delete5db79b134e9f6b82c0b36e0489ee08ed

This is a question of execution order,553a280de7202c0dce8dfe871821475eThe 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 3499910bf9dac5ae3c52d5ede7383485 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: 4935635dac8c6c651b2eb2125740bae1delete5db79b134e9f6b82c0b36e0489ee08ed

4. 962c0d911c24c98061cacb2b2b3efe24delete5db79b134e9f6b82c0b36e0489ee08ed. (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. 4c78147385a91189b82dff2dcb78bee3Submit form here63505a6f727f70c8bd4066f3066dcb9d

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>

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