Of Stack

javascript handles default a tag hyperlink events

  • 2020-06-22 23:47:14
  • OfStack

This article is an example of how javascript handles default a tag hyperlink events. Share to everybody for everybody reference. The specific analysis is as follows:

Sometimes it is necessary to add click event on the a tag, and to process 1 transaction before jumping, so 1 processing is needed. Usually the front end will give you 1 < a href="#" > link < /a > To represent this behavior, some of them will write it like this < a href="###" > link < /a > or < a href="javascript:void(0);" > link < /a > But it's not compatible with all browsers, and some browsers get weird shapes.

Therefore, this problem needs to be solved in another way, which is to block default events with jquery, as shown in the example of JQUERY's official API: 


<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>event.preventDefault demo</title>
 <script src="jquery-1.10.2.js"></script>
</head>
<body>
<a href="http://jquery.com">default click action is prevented</a>
<div id="log"></div>
<script>
$( "a" ).click(function( event ) {
 event.preventDefault();
 $( "<div>" )
  .append( "default " + event.type + " prevented" )
  .appendTo( "#log" );
});
</script>
</body>
</html>

Another method is to add an javascript method to the hyperchain, and add return to the method 

<a href="a.html" onclick="javascript:proc();" >link</a>

I hope this article has been helpful for your javascript programming.

Related articles: