Html div onclick событие

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

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

js code

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

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

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

JSFiddle

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

Ответы

Ответ 1

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

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

Проверка в обработчике событий DIV click, был ли фактический целевой элемент привязанным
→ jsFiddle

$('.expandable-panel-heading').click(function (evt) {
    if (evt.target.tagName != "A") {
        alert('123');
    }

    // Also possible if conditions:
    // - evt.target.id != "ancherComplaint"
    // - !$(evt.target).is("#ancherComplaint")
});

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

Остановка распространения события из прослушивателя кликов привязки
→ jsFiddle
```
$("#ancherComplaint").click(function (evt) {
    evt.stopPropagation();
    alert($(this).attr("id"));
});
```

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

:not(#ancherComplaint)

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

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

Ответ 2

Попробуйте это

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

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

DEMO

Ответ 3

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

$('.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/

Ответ 4

Измените код jQuery на это. Он будет предупреждать идентификатор a.

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

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

Демо

Ответ 5

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

Протестируйте клик по div и исследуйте цель

Live Demo

$(".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);
}

Ответ 6

Я бы использовал stopPropagation следующим образом:

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

$('#ancherComplaint').on('click',function(e){
    e.stopPropagation();
    alert('hiiiiiiiiii');
});

Ответ 7

Попробуйте этот пример, 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/

Ответ 8

поместите функцию jquery внутри готовой функции для события click click:

$(document).ready(function() {

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

});

Ответ 9

когда нажимают на клавишу предупреждения div

   $(document).delegate(".searchbtn", "click", function() {
        var key=$.trim($('#txtkey').val());
        alert(key);
        });

Ответ 10

У меня проблема, я хочу через onclick на div или закрывать меня, будет другой, но я не поймаю onclick. Под кодом в javascript:

<script type="text/javascript">
        function ocultar(){
        document.getElementById('ver').style.display = 'none';}
   </script>

и, как я его называю, из div

<div class="divCierre" onclick="ocultar()"></div>