{"id":8223,"date":"2024-03-14T07:45:14","date_gmt":"2024-03-14T07:45:14","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/"},"modified":"2025-08-03T02:06:43","modified_gmt":"2025-08-03T02:06:43","slug":"how-to-use-e-preventdefault-in-javascript","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/","title":{"rendered":"JavaScript e.preventDefault() Guide"},"content":{"rendered":"<p>In JavaScript, e.preventDefault() is a method used to prevent the default behavior of an event. It is commonly used to stop the default actions such as preventing links from redirecting or forms from submitting. Here is a simple example:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-meta\">&lt;!DOCTYPE <span class=\"hljs-keyword\">html<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\r\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>Prevent Default Example<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/www.example.com\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"link\"<\/span>&gt;<\/span>Click me<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"language-javascript\">\r\n<span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">getElementById<\/span>(<span class=\"hljs-string\">'link'<\/span>).<span class=\"hljs-title function_\">addEventListener<\/span>(<span class=\"hljs-string\">'click'<\/span>, <span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">e<\/span>) {\r\n  e.<span class=\"hljs-title function_\">preventDefault<\/span>(); <span class=\"hljs-comment\">\/\/ \u963b\u6b62\u94fe\u63a5\u7684\u9ed8\u8ba4\u884c\u4e3a<\/span>\r\n  <span class=\"hljs-title function_\">alert<\/span>(<span class=\"hljs-string\">'You clicked on the link!'<\/span>);\r\n});\r\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\r\n\r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span>\r\n<\/code><\/pre>\n<p>In the example above, when the user clicks on the link, e.preventDefault() prevents the default behavior of the link jumping, instead popping up an alert box.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In JavaScript, e.preventDefault() is a method used to prevent the default behavior of an event. It is commonly used to stop the default actions such as preventing links from redirecting or forms from submitting. Here is a simple example: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Prevent Default Example&lt;\/title&gt; &lt;\/head&gt; &lt;body&gt; &lt;a href=&#8221;https:\/\/www.example.com&#8221; id=&#8221;link&#8221;&gt;Click me&lt;\/a&gt; &lt;script&gt; document.getElementById(&#8216;link&#8217;).addEventListener(&#8216;click&#8217;, function(e) [&hellip;]<\/p>\n","protected":false},"author":14,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[10936,680,533,324,10935],"class_list":["post-8223","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-dom-events","tag-event-handling","tag-form-submission","tag-javascript","tag-preventdefault"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript e.preventDefault() Guide - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Learn how to use JavaScript&#039;s e.preventDefault() to stop default actions like form submissions and link redirects. Practical examples included.\" \/>\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.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript e.preventDefault() Guide\" \/>\n<meta property=\"og:description\" content=\"Learn how to use JavaScript&#039;s e.preventDefault() to stop default actions like form submissions and link redirects. Practical examples included.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-14T07:45:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-03T02:06:43+00:00\" \/>\n<meta name=\"author\" content=\"Noah Thompson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Noah Thompson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/\"},\"author\":{\"name\":\"Noah Thompson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a\"},\"headline\":\"JavaScript e.preventDefault() Guide\",\"datePublished\":\"2024-03-14T07:45:14+00:00\",\"dateModified\":\"2025-08-03T02:06:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/\"},\"wordCount\":71,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"keywords\":[\"DOM events\",\"event handling\",\"form submission\",\"JavaScript\",\"preventDefault\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/\",\"name\":\"JavaScript e.preventDefault() Guide - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-14T07:45:14+00:00\",\"dateModified\":\"2025-08-03T02:06:43+00:00\",\"description\":\"Learn how to use JavaScript's e.preventDefault() to stop default actions like form submissions and link redirects. Practical examples included.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript e.preventDefault() Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a\",\"name\":\"Noah Thompson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g\",\"caption\":\"Noah Thompson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/noahthompson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript e.preventDefault() Guide - Blog - Silicon Cloud","description":"Learn how to use JavaScript's e.preventDefault() to stop default actions like form submissions and link redirects. Practical examples included.","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.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript e.preventDefault() Guide","og_description":"Learn how to use JavaScript's e.preventDefault() to stop default actions like form submissions and link redirects. Practical examples included.","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-14T07:45:14+00:00","article_modified_time":"2025-08-03T02:06:43+00:00","author":"Noah Thompson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Noah Thompson","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/"},"author":{"name":"Noah Thompson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a"},"headline":"JavaScript e.preventDefault() Guide","datePublished":"2024-03-14T07:45:14+00:00","dateModified":"2025-08-03T02:06:43+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/"},"wordCount":71,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"keywords":["DOM events","event handling","form submission","JavaScript","preventDefault"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/","name":"JavaScript e.preventDefault() Guide - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-14T07:45:14+00:00","dateModified":"2025-08-03T02:06:43+00:00","description":"Learn how to use JavaScript's e.preventDefault() to stop default actions like form submissions and link redirects. Practical examples included.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-use-e-preventdefault-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript e.preventDefault() Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a","name":"Noah Thompson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g","caption":"Noah Thompson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/noahthompson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/8223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=8223"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/8223\/revisions"}],"predecessor-version":[{"id":153024,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/8223\/revisions\/153024"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=8223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=8223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=8223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}