Есть ли лучший способ, чем этот. У меня много "a" внутри "comment-item". Если я нажимаю на 'comment-item', он должен функционировать по-другому. И если нажать на 'a' внутри комментария-элемента, он должен функционировать по-другому. После долгих поисков и попыток я нашел вот это, которое работает для меня.

Является ли это хорошим решением или у нас есть другое лучшее решение.

// JavaScript Document
$(document).ready(function(e) {
    //Get the message ID
    $(document).on ({
        click: function (e) {
            if (e.target.nodeName == "A")
            {
                e.stopPropagation();
            }
            else
            {
                console.log($(this).children('#msgid').text());
                alert ("Hello World");
            }
        }
    }, ".comment-item");

Maanish

Ответов: 2

Ответы (2)

Является ли это хорошим решением или у нас есть какое-то другое лучшее решение?

Решение само по себе хорошее, но есть несколько моментов, которые вы могли бы подтянуть. Сверху:

$(".comment-item").on ("click", function(event){ ... });

Это прикрепляет слушатель щелчков ко всем div с классом comment-item. При нажатии на любой из этих div вызывается анонимная функция, которую вы указываете в качестве второго параметра метода on. В качестве параметра анонимной функции передается ссылка на событие щелчка.

У этого объекта события есть куча свойств, к которым вы можете получить доступ. Одним из них является event.target, который представляет собой ссылку на элемент, отправивший событие. Мы можем использовать его, чтобы определить, где пользователь щелкнул - в вашем случае на ссылке или где-то еще в div.

.
$(".comment-item").on ("click", function(event){
  if (event.target.nodeName === "A"){
    // they clicked a link
  } else {
    // they clicked the div
  }
});

Обратите внимание на тройное равенство. Она проверяет равенство без принуждения типов. Возможно, будет полезно привыкнуть к ее использованию. Подробнее об этом можно прочитать здесь: Зачем использовать оператор тройного равенства в JavaScript?

Я также предпочитаю более длинный синтаксис if / else (в отличие от вечного оператора). Это делает код немного длиннее, но зато его легче понять.

Узнав, что было нажато, вы можете отреагировать соответствующим образом - в случае, если это была ссылка, остановить действие браузера по умолчанию с помощью event.preventDefault().

.

Я бы также рекомендовал избегать alert при отладке. Вместо этого используйте консоль вашего браузера.

Здесь представлена простая демонстрация:

$(".comment-item").on ("click", function(event){
  if (event.target.nodeName === "A"){
    console.log("Вы нажали " + event.target.innerText);
    event.preventDefault();
  } else {
    console.log("Вы нажали на div");
  }
});
.comment-item{
  background: #d3d3d3;
  padding: 15px;
  height: 250px;
}

.comment-item a{
  background: #585858;
  цвет: белый;
  text-decoration: none;
  display: block;
  padding: 5px;
  margin: 15px 25px;
}

В качестве последнего замечания. Если вы поместите этот JavaScript непосредственно перед закрывающим тегом на вашей странице, вы также можете потерять $(document).ready(function(e) { ... });, поскольку страница будет готова по определению.

Вы всегда должны пробовать то, что работает лучше всего, а затем рефакторить свой код, поскольку всегда есть лучшее и более аккуратное решение.

  $('.comment-item').on('click', function(e){
      if(e.target.nodeName === "A") ? return false : alert("Hello");
    });

2022 WebDevInsider