У меня есть один 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]
что не так с моим кодом? пожалуйста, помогите мне.
Проблема заключалась в том, что щелчок по якору все еще вызывал щелчок в вашем < div >
. Это называется "событие пузырится".
На самом деле, есть несколько решений:
Проверка в обработчике событий щелчка DIV, был ли фактический целевой элемент якорем < br / > [& rarr; jsFiddle](
) $ ('.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. Селектор не влияет на слушателя, когда он вызывается; он устанавливает только список элементов, на которые должны быть зарегистрированы слушатели. Поскольку этот список одинаков в обеих версиях, разницы нет.
Попробуй это
$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
alert('123');
});
$('#ancherComplaint').click(function (event) {
alert($(this).attr("id"));
event.stopPropagation()
})
[ DEMO ][1]
Попробуйте следующее:
$('.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"));
}
Вот рабочая демонстрация:
Измените свой код jQuery с этим. Он предупредит идентификатор а.
$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
markActiveLink();
alert('123');
});
function markActiveLink(el) {
var el = $('a').attr("id")
alert(el);
}
[Демо][1]
Вам нужно прочитать о пузырях событий и наверняка удалить встроенную обработку событий, если у вас все равно есть jQuery
Проверьте щелчок на div и проверьте цель
[ Live Demo < / kbd >]()
$(".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);
}
Я бы использовал «stopPropagation», как это:
$('.expandable-panel-heading:not(#ancherComplaint)').click(function () {
alert('123');
});
$('#ancherComplaint').on('click',function(e){
e.stopPropagation();
alert('hiiiiiiiiii');
});
Попробуйте этот пример, onclick все еще вызывается из вашего HTML, и пузырь событий прекращается.
<div class="expandable-panel-heading">
<h2>
<a id="ancherComplaint" href="#addComplaint" onclick="markActiveLink(this);event.stopPropagation();">ABC</a>
</h2>
</div>
[
][1]