Torne uma Div clicável usando JavaScript

1. Usando o manipulador de eventos onclick para tornar uma div clicável
2. Adicionando um clique condicional a um div
3. É bom ter recurso em uma div clicável
4. Atingindo a funcionalidade do elemento âncora com uma div clicável

A tag <a> (ou o elemento âncora) em HTML é comumente usada para controles de navegação. É uma tag clicável que funciona sem nenhum código javascript funcionando nos bastidores. Não é um elemento de bloco. Podemos usar uma tag <div> para rotear para um caminho exatamente como a tag âncora? A resposta é definitivamente sim, mas você precisará escrever um código javascript para isso. Podemos usar um manipulador de clique no elemento div para torná-lo clicável.

Usando o manipulador de eventos onclick para tornar uma div clicável

O elemento âncora é um inline exibido. E esse recurso pode nem sempre funcionar a nosso favor ao projetar a Interface Gráfica do Usuário. div s são fáceis de usar ao projetar GUIs, pois são elementos de bloco autônomos. Um div é um elemento de divisão de conteúdo e não é clicável por padrão. Podemos ter que usar o manipulador de eventos onclick para processar os eventos emitidos pelo elemento quando um usuário clica nele. O manipulador de eventos onclick aceita uma função ou uma expressão JavaScript precedendo a função. Quando um usuário clica em div, o javascript executa as funções associadas ou as expressões em tempo de execução. Existem algumas maneiras de adicionar o manipulador de eventos onclick a um elemento div.

Usando códigos HTML e JavaScript combinados para tornar uma div clicável

A abordagem mais amplamente usada em javascript e em várias estruturas de javascript é vincular uma chamada de função ao manipulador de eventos onclick no código HTML. Em seguida, escrevemos a definição da função associada a ela no código javascript. Assim que um usuário clicar em div, o manipulador de eventos onclick executará a função passada como um argumento para onclick do elemento div. Consulte o código a seguir.

<div id="title-div" onclick="sayHello()"></div>

function sayHello() {
  console.log('Hello there !!');
}

Uma vez que o usuário clica em title-div, a função associada sayHello() é executada. E teremos Hello there !! conectado no console da web. Essa abordagem é amplamente usada e facilita a depuração em comparação com a abordagem de javascript puro. O HTML mostra explicitamente a ligação.

Usando o JavaScript puro para tornar um div clicável

Outra abordagem é puramente baseada em javascript. Primeiro encontramos o elemento HTML pretendido usando qualquer um dos métodos como document.getElementById(), document.getElementsByClassName(), document.querySelectorAll() etc. O método mais comumente usado para encontrar o elemento HTML é o document.getElementById(), pois identifica exclusivamente o elemento HTML com base no id que atribuímos a ele no HTML. Assim que encontrarmos o elemento, o elemento div, anexamos o manipulador de eventos onclick e vinculamos a função a ser executada no click do div. O código a seguir elabora a abordagem.

<div id="title-div">Click here</div>

window.onload =
    function() {
  var el = document.getElementById('title-div');
  el.onclick = sayHello;
}

function sayHello() {
  console.log('Hello');
}

No código acima, vinculamos o manipulador de eventos onclick puramente em JavaScript. Não há nenhum traço de mapeamento onclick no HTML. O HTML é mantido simples com um elemento div e um id associado. Além disso, observe que atribuímos o objeto de função sayHello ao manipulador de eventos onclick. Se vincularmos sayHello (com parênteses) em vez de sayHello, isso fará com que o JavaScript execute a função no próprio carregamento da janela. E nada acontecerá quando um usuário clicar no elemento div.

Adicionando um clique condicional a um div

Podemos acionar o evento de clique condicionalmente. Usando a abordagem HTML e JavaScript, podemos adicionar a expressão juntamente com o && ou o || assinar com base no requisito. JavaScript executa o evento click com base em como a expressão booleana é avaliada. Se for verdadeiro, o JavaScript executa a função associada.

<div onclick="isEvenClick() && sayHello()">Click Here !!!</div>

function sayHello() {
  console.log('Hello');
}

function isEvenClick() {
  clickCounter++;
  return (clickCounter % 2 === 0)
}

O código acima registrará Hello apenas em um número par de cliques. Também podemos escrever o mesmo código com expressão em vez da função isEvenClick() conforme elaborado no código a seguir.

<div onclick="(++clickCounter % 2 === 0) && sayHello()" id="title-div">Click here</div>

A expressão é avaliada em tempo de execução para o valor de clickCounter. Se o clickCounter for par, a expressão (++clickCounter % 2 === 0) será avaliada como true e a função sayHello() será executada.

É bom ter recurso em uma div clicável

Assim que adicionarmos um ouvinte click a um div, ainda será um div. O usuário não entenderá se esse elemento HTML possui alguma interação do usuário associada a ele. Para isso, podemos adicionar recursos usando os estilos CSS. Uma delas é transformar o cursor em um ícone de mão. Podemos fazer isso usando cursor: pointer. É uma boa prática de UI / UX sugerir ao usuário final que esse elemento HTML pode ser acionado. Podemos fazer isso da seguinte maneira.

<div onclick="sayHello()" style="cursor: pointer;">Click Here !!!</div>

Podemos conseguir o mesmo usando JavaScript puro adicionando estilos ao elemento em tempo de execução. Primeiro, selecionamos o elemento usando document.getElementById() e, em seguida, adicionamos o estilo do cursor usando el.style.cursor e atribuímos a ele o valor de string ponteiro. O código a seguir explica isso.

<div onclick="sayHello()">Click Here !!!</div>

window.onload =
    function() {
  var el = document.getElementById('title-div');
  el.style.cursor = 'pointer';
  el.onclick = sayHello;
}

function sayHello() {
  console.log('Hello');
}

Atingindo a funcionalidade do elemento âncora com uma div clicável

Podemos usar um elemento div para imitar um elemento âncora. A tag <a> possui um atributo chamado href que cria um hiperlink. Podemos imitar o mesmo comportamento usando onclick de um div. Vinculamos uma função para capturar o evento click no código HTML. No código javascript, usamos o atributo window.location.href para vincular um URL ao div. Observe o funcionamento no código a seguir.

<div onclick="navToGoogle()" style="cursor: pointer;">Take me to Google</div>

function navToGoogle() {
  window.location.href = 'https://www.google.com';
}