How To Disable Tag A In Javascript

Here are 2 ways to disable a HTML link/anchor element using CSS or by using inline JavaScript.

Bạn đang xem: How to disable tag a in javascript


Table of ContentsDisable HTML anchor with CSS pointer-events: noneDisable HTML anchor with inline JavaScript href="javascript:void(0)"

Disable HTML anchor with CSS pointer-events: none

To disable a HTML anchor element with CSS, we can apply the pointer-events: none style.

pointer-events: none will disable all cliông chồng events on the anchor element.

For example:


<a href="https://google.com" style="pointer-events: none">Google.coma>

<style> .disabled-link style> <a href="https://google.com" class="disabled-link">Google.coma>

This is a great option when you only have access khổng lồ class or style attributes. It can even be used lớn disable all the HTML liên kết on a page.


<style> /* not recommended */ a style> <a href="https://google.com">Google.coma>

We’ve sầu now seen how lớn disable an HTML anchor/link element (a tag) using pointer-events: none, which can be done without touch the existing href attribute using styles.

Next we’ll see how to disable an HTML anchor/links element using inline JavaScript inside of the href attribute.

Xem thêm: Phần Mềm Kms Pico - Cách Sử Dụng & Download Kmspico 2019

Disable HTML anchor with inline JavaScript href="javascript:void(0)"

The following link is disabled using inline JavaScript in the href attribute.




<div x-data=""> <a :href="disabled ? 'javascript:void(0)': 'https://google.com'">Google.coma> <button


Get The Jest Handbook (100 pages)

Take your JavaScript testing to the next cấp độ by learning the ins and outs of Jest, the top JavaScript testing library.

Find out more

or

Join 1000s of developers learning about Enterprise-grade Node.js & JavaScript


Improve sầu my JSAuthorHugo Di Francesco

Co-author of "Professional JavaScript" with Packt. He runs the Code with Hugo website helping over 100,000 developers every month và holds an MEng in Mathematical Computation from University College London (UCL). He has used JavaScript extensively to lớn create scalable và performant platforms at companies such as Canon & Elsevier.


Get The Jest Handbook (100 pages)

Take your JavaScript testing to the next cấp độ by learning the ins and outs of Jest, the top JavaScript testing library.




A tiny case study about migrating to Netlify when disaster strikes at GitHub, featuring CloudflareSimple, but not too simple: how using Zeit’s `micro` improves your Node applicationsWhen to use Jest snapshot tests: comprehensive sầu use-cases và examples ????Bring Redux lớn your queue logic: an Express thiết đặt with ES6 và bull queue

#beginner

Tips For Students Choosing Their First Programming Language

More & more colleges offer their students the opportunity lớn try their hand in coding. With technologies continuing making massive inroads people’s our everyday lives, such professions as a computer programmer, web developer, software engineer, sản phẩm điện thoại ứng dụng developer, & others ranks among muốn the best paying & on-demand. No wonder, so many students, even those who initially chose completely different majors, strive sầu khổng lồ become conversant with popular programming languages. Being able to write code & program is not only promising, it’s prestigious. But slews of your learners find themselves plagued by some concerns & doubts we’ll try to lớn dispel in today’s article. What’s more, we’ll help you answer the hardest questions most beginners ask themselves when tackling programming và choose the programming language you’ll be most comfortable with. ...

Author Hugo Di Francesteo
#alpinejs #javascript

An accessible Alpine.js thực đơn toggle

The “Hello World” of JavaScript frameworks and libraries seems khổng lồ have become the tovì chưng app. In the case of Alpine.js a tovày phầm mềm is almost too large khổng lồ showcase Alpine’s core benefits và use case. Another issue with a lot of JavaScript examples is that they forego accessibility. Therefore we won’t be building a tovì chưng tiện ích but an accessible navigation menu. Our thực đơn is as follows (read on for a breakdown of how it’s built). ...

Author Hugo Di Francesco