jQuery, используйте правильный селектор

Question

У меня есть div, внутри которого есть некоторый текст и несколько слов, окруженных определенными тегами span. Я хочу щелкнуть эти «составные» слова и сделать так, чтобы div скользил вниз, показывая «базовый» div с текстом, связанным с этим определенным составным словом. Когда я нажимаю на div, а не на связанное слово, я хочу, чтобы div снова сдвинулся вверх. Таким образом, я связал некоторые действия с div и классом этих промежутков. однако, когда я нажимаю на промежуток, div также получает действие щелчка. Как я должен изменить селекторы, чтобы не получать щелкающее действие на div, когда я нажимаю на промежуток?

Вот код:

<div class='mainpage'>
    <p class='common'>bla-bla-bla <span class='footnoted' footnote='f1'>foo bar</span></p>
</div>

JQuery код:

$(document).ready(function(){
    $(".mainpage>.common>.footnoted").click(function(){
        alert('a');
    });

    $(".mainpage").not($(".mainpage>.common>.footnoted")).click(function(){
        alert('b');
    });
});

Другими словами, когда я нажимаю на «foo bar», я получаю предупреждения «a» и «b», тогда как я хочу получить только «a». Как я могу это сделать?

Спасибо заранее. Тимофей.

Answer 1

Вам нужно использовать

event.stopPropagation();

в пролете вот так

$('div').click(function(){alert('div clicked');});

$('div span').click(function(event){ 
    alert('span clicked')
    event.stopPropagation();
});

Демонстрация в реальном времени

Ссылка

Answer 2

В зависимости от того, какое событие запускается первым, вы можете попробовать добавить return false; в конец функции события щелчка.Это должно остановить срабатывание события второго щелчка и исправить вашу проблему.