{"id":7414,"date":"2015-10-12T16:15:32","date_gmt":"2015-10-12T13:15:32","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=7414"},"modified":"2017-12-21T16:08:25","modified_gmt":"2017-12-21T14:08:25","slug":"jquery-preventdefault-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/","title":{"rendered":"jQuery preventDefault Example"},"content":{"rendered":"<p>In this example we are going through a rather useful jQuery method called <code>.preventDefault()<\/code>. Sometimes you have a hyperlink that needs to be a hyperlink but you don\u2019t want it to process and open the link but only call a javascript function say. Fortunately there is a function in jQuery to stop the hyperlink action.<\/p>\n<p> The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.<\/p>\n<p>For example, you can prevent a submit button from submitting a form, prevent a link from following the URL etc. If this method is called, the default action of the event will not be triggered. Not all events are cancelable. You can use the cancelable property to find out if an event is cancelable.<br \/>\n[ulp id=&#8217;qGGDqWnle19VavkM&#8217;]<\/p>\n<h2>1. Basic Document Setup<\/h2>\n<p>To begin, create a new HTML document and add the following basic syntax in it:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;jQuery PreventDefault Example&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;!-- HTML SECTION  --&gt;\r\n\r\n\r\n&lt;!-- JAVASCRIPT SECTION  --&gt;\r\n&lt;script src=\"jquery-1.11.3.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;script type=\"text\/javascript\"&gt;\r\n\r\n&lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Note that jQuery library is linked locally, so you need to download and link it too, by clicking <a href=\"https:\/\/jquery.com\/download\/\" target=\"_blank\">here<\/a>.<\/p>\n<h2>2. Usage Examples<\/h2>\n<p>The following examples reflect real-life examples when the <code>.preventDefault()<\/code> method is used.<\/p>\n<h3>2.1 Prevent and Catch a Hyperlink Click<\/h3>\n<p>To see this case in action, add an <code>a<\/code> tag with a <code>href<\/code> attribute that contains a web link like so:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- HTML SECTION  --&gt;\r\n&lt;a href=\"http:\/\/www.webcodegeeks.com\/\"&gt;Web Code Geeks&lt;\/a&gt;\r\n<\/pre>\n<p>Now in JS, after the document has been fully loaded, we &#8216;listen&#8217; for <code>click<\/code> events on anchor tags and prevent the default behaviour of this event.<\/p>\n<pre class=\"brush:java\">\r\n&lt;!-- JAVASCRIPT SECTION  --&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(document).ready(function(){\r\n    $('a').click(function(e){\r\n        e.preventDefault();\r\n        alert('You just tried to open a link. And jQuery prevented it.');\r\n    });\r\n});\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>As you&#8217;d might expect, we&#8217;d get an alert box in the browser if we try to click the link.<br \/>\n<figure id=\"attachment_7424\" aria-describedby=\"caption-attachment-7424\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/prevent1.gif\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/prevent1.gif\" alt=\"Prevent and Catch a Hyperlink Click\" width=\"800\" height=\"320\" class=\"size-full wp-image-7424\" \/><\/a><figcaption id=\"caption-attachment-7424\" class=\"wp-caption-text\">Prevent and Catch a Hyperlink Click<\/figcaption><\/figure><\/p>\n<h3>2.2 Prevent Form Submit Button<\/h3>\n<p>First, create a simple <code>form<\/code> element:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;form action=\"submit\"&gt;\r\n    Username: &lt;input type=\"text\"&gt;&lt;br&gt;\r\n    Password: &lt;input type=\"password\"&gt;&lt;br&gt;\r\n    &lt;input type=\"submit\"&gt;\r\n&lt;\/form&gt;\r\n<\/pre>\n<p>In this next example, not only are we preventing a form submission, but also setting a timeout function:<\/p>\n<pre class=\"brush:java\">\r\n&lt;!-- JAVASCRIPT SECTION  --&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(document).ready(function(){\r\n    $('form').submit(function(e){\r\n        e.preventDefault();\r\n        var self = this;\r\n        window.setTimeout(function() {\r\n        self.submit();\r\n        }, 2000);\r\n    });\r\n});\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>This means that after 2 seconds the timer is going to run out and the page will redirect to a browser page like &#8220;This webpage is not found&#8221;.<br \/>\n<figure id=\"attachment_7426\" aria-describedby=\"caption-attachment-7426\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/prevent2.gif\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/prevent2.gif\" alt=\"Prevent Form Submit Button\" width=\"800\" height=\"320\" class=\"size-full wp-image-7426\" \/><\/a><figcaption id=\"caption-attachment-7426\" class=\"wp-caption-text\">Prevent Form Submit Button<\/figcaption><\/figure><\/p>\n<h3>2.3 Disable Keydown Scroll Button<\/h3>\n<p>This is a case where you don&#8217;t want to enable users scrolldown with the keyboard button (down arrow). So basically the HTML is going to some boxes in order to have some scrollbar and make sense. <\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- HTML SECTION  --&gt;\r\n&lt;div style=\"background-color: #c0392b;\" class=\"box\"&gt;&lt;\/div&gt;\r\n&lt;div style=\"background-color: #16a085;\" class=\"box\"&gt;&lt;\/div&gt;\r\n&lt;div style=\"background-color: #27ae60;\" class=\"box\"&gt;&lt;\/div&gt;\r\n&lt;div style=\"background-color: #8e44ad;\" class=\"box\"&gt;&lt;\/div&gt;\r\n&lt;div style=\"background-color: #2c3e50;\" class=\"box\"&gt;&lt;\/div&gt;\r\n&lt;div style=\"background-color: #7f8c8d;\" class=\"box\"&gt;&lt;\/div&gt;\r\n<\/pre>\n<p>Note that the boxes have been added some CSS to create the look:  <\/p>\n<pre class=\"brush:css\"> \r\n.box {\r\n      width: 20em;\r\n      height: 15em;\r\n      margin: 2em;\r\n}\r\n<\/pre>\n<p>This simulates a long page. In the JS section, we capture any <code>keydown<\/code> events on the whole <code>document<\/code> and check if the key being pressed is the down key (which is assigned a key code value, 40). Then, typically, call the <code>.preventDefault()<\/code> event on this event.<\/p>\n<pre class=\"brush:java\">\r\n&lt;!-- JAVASCRIPT SECTION  --&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(document).ready(function(){\r\n    $(document).keydown(function(e){\r\n        if(e.keyCode == '40'){\r\n        e.preventDefault();\r\n        }\r\n    });\r\n});\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>The result would be a non-scrollable page using the keydown arrow, but it can still be scrolled used the mouse scroll.<br \/>\n<figure id=\"attachment_7430\" aria-describedby=\"caption-attachment-7430\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/prevent3.gif\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/prevent3.gif\" alt=\"Disable Keydown Scroll Button\" width=\"800\" height=\"800\" class=\"size-full wp-image-7430\" \/><\/a><figcaption id=\"caption-attachment-7430\" class=\"wp-caption-text\">Disable Keydown Scroll Button<\/figcaption><\/figure><\/p>\n<h2>3. Conclusion<\/h2>\n<p>To conclude, it is improtant to note that not all events can be prevented from triggering their default action and you should check that using the <code>cancelable<\/code> property. The preventDefault() method does not prevent further propagation of an event through the DOM. Use the <code>stopPropagation()<\/code> method to handle this.<\/p>\n<p>However, the method is useful is all cases you want to consider some other action when these events are captured, lie for example, animation, alerts, security reasons etc.<\/p>\n<h2>4. Download<\/h2>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here: <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/09\/jQuery-PreventDefault.zip\"><strong>jQuery PreventDefault<\/strong><\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this example we are going through a rather useful jQuery method called .preventDefault(). Sometimes you have a hyperlink that needs to be a hyperlink but you don\u2019t want it to process and open the link but only call a javascript function say. Fortunately there is a function in jQuery to stop the hyperlink action. &hellip;<\/p>\n","protected":false},"author":75,"featured_media":919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-7414","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>jQuery preventDefault Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example we are going through a rather useful jQuery method called .preventDefault(). Sometimes you have a hyperlink that needs to be a hyperlink\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery preventDefault Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example we are going through a rather useful jQuery method called .preventDefault(). Sometimes you have a hyperlink that needs to be a hyperlink\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-10-12T13:15:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-21T14:08:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"jQuery preventDefault Example\",\"datePublished\":\"2015-10-12T13:15:32+00:00\",\"dateModified\":\"2017-12-21T14:08:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/\"},\"wordCount\":557,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/\",\"name\":\"jQuery preventDefault Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"datePublished\":\"2015-10-12T13:15:32+00:00\",\"dateModified\":\"2017-12-21T14:08:25+00:00\",\"description\":\"In this example we are going through a rather useful jQuery method called .preventDefault(). Sometimes you have a hyperlink that needs to be a hyperlink\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"jQuery preventDefault Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery preventDefault Example - Web Code Geeks - 2026","description":"In this example we are going through a rather useful jQuery method called .preventDefault(). Sometimes you have a hyperlink that needs to be a hyperlink","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/","og_locale":"en_US","og_type":"article","og_title":"jQuery preventDefault Example - Web Code Geeks - 2026","og_description":"In this example we are going through a rather useful jQuery method called .preventDefault(). Sometimes you have a hyperlink that needs to be a hyperlink","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-10-12T13:15:32+00:00","article_modified_time":"2017-12-21T14:08:25+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"jQuery preventDefault Example","datePublished":"2015-10-12T13:15:32+00:00","dateModified":"2017-12-21T14:08:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/"},"wordCount":557,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/","name":"jQuery preventDefault Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","datePublished":"2015-10-12T13:15:32+00:00","dateModified":"2017-12-21T14:08:25+00:00","description":"In this example we are going through a rather useful jQuery method called .preventDefault(). Sometimes you have a hyperlink that needs to be a hyperlink","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-preventdefault-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/"},{"@type":"ListItem","position":4,"name":"jQuery preventDefault Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/7414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=7414"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/7414\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=7414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=7414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=7414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}