Блог

Главная - Вопросы по программированию - Javascript: щелчок по элементу вместо кнопки

Javascript: щелчок по элементу вместо кнопки

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть простой код, в котором есть 4 контейнера с кнопками. Теперь я попытался сделать весь элемент интерактивным для перенаправления на сайт, специфичный для контейнера.

Один элемент, подобный приведенному у меня в примере, работает нормально, но когда я добавляю более одного, другие не будут работать.

Существует facebook, youtube, Google и контейнер Twitter, и у каждого из них есть определенная ссылка для перенаправления.

Итак, мне нужно сделать более одного элемента корректно интерактивным не только на кнопке, но и на всем элементе.

 var el = document.getElementById("container");

if (el.addEventListener) {
  el.addEventListener("click", function() {
    document.getElementById("button").click();
  }, false);
} else {
  el.attachEvent("onclick", function() {
    document.getElementById("button").click();
  });
}  
 #container {
  background: coral;
  padding: 32px;
  margin: 16px;
  cursor: pointer;
}  
 <div id="container">

  <a id="button" href="https://google.sk/">Google</a>

</div>

<div id="container">

  <a id="button" href="https://youtube.com/">Youtube</a>

</div>

<div id="container">

  <a id="button" href="https://facebook.com/">Facebook</a>

</div>

<div id="container">

  <a id="button" href="https://twitter.com/">Twitter</a>

</div>

Комментарии:

1. идентификатор должен быть уникальным

2. попробуйте использовать разные идентификаторы или изменить селектор с помощью class

3. @AlibiGhazi когда я использую скрипт выбора класса, он не будет работать и будут разные идентификаторы, но у меня сотни таких элементов, поэтому разные идентификаторы будут проблемой: D

4. @tarkh да, но когда я использую скрипт выбора класса, он не будет работать

5. Попробуйте обернуть div тегом привязки, подобным so <a href="google.sk"><div class="container">google</div></a> выполнение того, что вы сейчас делаете в своем коде, не сработает

Ответ №1:

В структуре HTML, id должно быть уникальным, вы можете использовать class вместо этого, но вам также нужно затем перебирать эти элементы (фрагмент приведен ниже)

 var elements = document.querySelectorAll(".container");

elements.forEach(el => {
  if (el.addEventListener) {
    el.addEventListener("click", function() {
      el.querySelector(".button").click();
    }, false);
  } else {
    el.attachEvent("onclick", function() {
      el.querySelector(".button").click();
    });
  }
});  
 .container {
  background: coral;
  padding: 32px;
  margin: 16px;
  cursor: pointer;
}  
 <div class="container">

  <a class="button" href="https://google.sk/">Google</a>

</div>

<div class="container">

  <a class="button" href="https://youtube.com/">Youtube</a>

</div>

<div class="container">

  <a class="button" href="https://facebook.com/">Facebook</a>

</div>

<div class="container">

  <a class="button" href="https://twitter.com/">Twitter</a>

</div>

Мне просто любопытно — почему вы хотите обрабатывать click с помощью JavaScipt? Вместо этого вы можете справиться с этим с помощью:

 <a href="google.sk">
  <div class="container">google</div>
</a>

Вы пробовали этот подход вместо этого?

Ответ №2:

Вот код, как это сделать с помощью простой функции javascript.

 function gohere(url) {
    location.replace(url)
}  
 #container {
      background: coral;
      padding: 32px;
      margin: 16px;
      cursor: pointer;
}  
 <div onclick="gohere('https://google.sk/')" id="container">
    Google
</div>

<div onclick="gohere('https://youtube.com/')" id="container">
    Youtube
</div>

<div onclick="gohere('https://facebook.com/')" id="container">
    Facebook
</div>

<div onclick="gohere('https://twitter.com/')" id="container">
    Twitter
</div>

Ответ №3:

Вы не должны использовать ‘id’, когда у вас на странице более одного элемента. Вместо этого рекомендуется использовать классы css.

Что вы можете сделать, так это использовать document.querySelectorAll('.some-class-here') , а затем выполнить итерацию в каждом элементе, чтобы применить прослушиватель событий click.

Чтобы сделать весь элемент интерактивным, я бы использовал один из трех подходов:

  1. Вариант, который мне нравится, — это добавить отступ в кнопку, чтобы кнопка / ссылка заполняла все пространство контейнера таким образом, чтобы весь контейнер был кликабельным
  2. Поместите контейнер внутри ссылки
  3. Вам пришлось бы создать функцию javascript, которая будет получать элемент, на который нажимается, и считывать некоторые данные, относящиеся к элементу, на который будет дана ссылка, например data-link="http://google.com" . С помощью этих данных вы можете использовать location для перенаправления или открытия ссылки в новой таблице.