HTML Div onclick event

У меня есть один html div на моей странице jsp, на котором я поместил один анкерный тег, пожалуйста, найдите код ниже для этого

<div class="expandable-panel-heading">
     <h2>
         <a id="ancherComplaint" href="#addComplaint" 
                            onclick="markActiveLink(this);">ABC</a>
     </h2>
</div>

JS код

$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
     alert('123');
 });

function markActiveLink(el) {   
    alert($(el).attr("id"));
}

здесь я, когда нажимаю на div , я получаю предупреждение с сообщением 123, это нормально, но когда я нажимаю на ABC , я хочу сообщение, которое хочу вызвать метод markActiveLink.

[JSFiddle][1]

что не так с моим кодом? пожалуйста, помогите мне.

Natan Streppel
Редактировал вопрос 29-го октября 2013 в 10:40
Программирование
javascript html jquery onclick
29-го октября 2013 в 10:39
29 просмотров
Комментарии к вопросу (3)
Решение

Проблема заключалась в том, что щелчок по якору все еще вызывал щелчок в вашем < div >. Это называется "событие пузырится".

На самом деле, есть несколько решений:

  • Проверка в обработчике событий щелчка DIV, был ли фактический целевой элемент якорем < br / > [& rarr; jsFiddle](http://jsfiddle.net/JVrNc/3/)

      $ ('.expandable-panel-heading') .click (функция (evt) {
      if (evt.target.tagName != "А") {
          оповещение ('123');
      }

      // Также возможно, если условия:
      // - evt.target.id != "ancherComplaint"
      // - !$ (evt.target) .is ("#ancherComplaint")
  });

  $ ("#ancherComplaint") .click (function () {
      alert ($ (this) .attr ("id")) ;
  });

  • Остановка распространения события из списка привязок < br / > [& rarr; jsFiddle](http://jsfiddle.net/JVrNc/5/)

      $ ("#ancherComplaint") .click (функция (evt) {
      evt.stopPropagation () ;
      alert ($ (this) .attr ("id")) ;
  });

< hr / > Как вы, возможно, заметили, я удалил следующую часть селектора из моих примеров:

:not(#ancherComplaint)

Это было ненужным, потому что нет элемента с классом .expandable-panel-heading, который также имеет #ancherComplaint в качестве своего идентификатора .

Я предполагаю, что вы хотели подавить событие для якоря. Это не может работать таким образом, потому что оба селектора (ваш и мой) выбирают один и тот же DIV. Селектор не влияет на слушателя, когда он вызывается; он устанавливает только список элементов, на которые должны быть зарегистрированы слушатели. Поскольку этот список одинаков в обеих версиях, разницы нет.

Community
Редактировал ответ 23-го мая 2017 в 10:29
Комментарии (0)

Попробуй это

$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
    alert('123');
});

$('#ancherComplaint').click(function (event) {
    alert($(this).attr("id"));
    event.stopPropagation()
})

[ DEMO ][1]

Комментарии (0)

Попробуйте следующее:

$('.expandable-panel-heading').click(function (e) {
        if(e.target.nodeName == 'A'){
            markActiveLink(e.target)
            return; 
        }else{
            alert('123');
        }
 });

function markActiveLink(el) {   
    alert($(el).attr("id"));
}

Вот рабочая демонстрация: http://jsfiddle.net/JVrNc/4/

Комментарии (0)

Измените свой код jQuery с этим. Он предупредит идентификатор а.

$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
markActiveLink();    
     alert('123');
 });

function markActiveLink(el) {   
var el = $('a').attr("id")
    alert(el);
}

[Демо][1]

Комментарии (1)

Вам нужно прочитать о пузырях событий и наверняка удалить встроенную обработку событий, если у вас все равно есть jQuery

Проверьте щелчок на div и проверьте цель

[ Live Demo < / kbd >](http://jsfiddle.net/mplungjan/kDnRy/)

$(".expandable-panel-heading").on("click",function (e) {
    if (e.target.id =="ancherComplaint") { // or test the tag
        e.preventDefault(); // or e.stopPropagation()
        markActiveLink(e.target);
    }    
    else alert('123');
});
function markActiveLink(el) {   
    alert(el.id);
}
Комментарии (0)

Я бы использовал «stopPropagation», как это:

$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
     alert('123');
 });

$('#ancherComplaint').on('click',function(e){
    e.stopPropagation();
    alert('hiiiiiiiiii');
});
Комментарии (0)

Попробуйте этот пример, onclick все еще вызывается из вашего HTML, и пузырь событий прекращается.

<div class="expandable-panel-heading">
<h2>
  <a id="ancherComplaint" href="#addComplaint" onclick="markActiveLink(this);event.stopPropagation();">ABC</a>
</h2>
</div>

[Http://jsfiddle.net/NXML7/1/][1]

Комментарии (0)

поместите свою функцию jquery в готовую функцию для события щелчка вызова:

$(document).ready(function() {

  $("#ancherComplaint").click(function () {
     alert($(this).attr("id"));
  });

});
Комментарии (0)

при нажатии на кнопку оповещения div

   $(document).delegate(".searchbtn", "click", function() {
        var key=$.trim($('#txtkey').val());
        alert(key);
        });
Комментарии (0)