выберите DIV, но не ссылку внутри него, вопрос JQuery

У меня есть следующий div:

<div class='amazingmenu' id='menupull'>
    <img src='images/down.png' width=20 height=20 align='right'/>
    <div id='menupullhideme'>click the arrow to read the rest!<br /></div>
    more jokes on <a href='http://www.amazingjokes.com'>amazingjokes.com</a>
</div>

щелчок по DIV или изображению должен раскрыть некоторую функцию в jQuery:

$('#menupull').click( function() {
          alert( 'pullmenu clicked' );
});

Я хочу сделать так, чтобы он только предупреждал о сообщении, когда я щелкаю по DIV или изображению, но не по ссылке. Пробовал это:

     $('#menupull:not(a)').click( function() {...

но это не сработало. Есть идеи?

Ответы на вопрос(3)

Решение Вопроса

проблема в пузырении событий ... то, что вы можете сделать, находится внутри вашего события "click", проверьте,nodeName/tagName А или нет, если это так, отмените оставшуюся часть своей функции и позвольте якорю просто делать свое дело.

Мой jQuery немного ржавый, так как сам им не пользуюсь, но думаю, что-то вроде этого ..

$('#menupull').click( function(e) {
    var target  = $(e.target);
    if( target.is('a') ) {
        return true; // True, because we don't want to cancel the 'a' click.
    }
});
 QMaster02 сент. 2014 г., 12:51
+1 @ Андрей - это хорошо, но я думаю, что работать безопаснее.
 CharlesLeaf02 окт. 2010 г., 07:13
Это верно, что касается размещения оповещения внутри, если, на мой взгляд, это зависит от того, сколько кода вы там вставили ... Я предпочитаю избегать слишком глубокого вложения, чтобы сохранить мой код чистым.
 Peter Ajtai02 окт. 2010 г., 03:13
С вашим кодом, как есть, очень важно заявить, чтоalert должны быть включены толькопосле if заявление .......... Кроме того, действительно нет необходимостиreturn trueПроще говоряalert внутриif( ! target.is('a') ) { ... } и нативная функциональность якоря не мешает.

что событие переходит в div при нажатии на ссылку, поэтому вы хотите, чтобы он не пузырился при нажатии на ссылку, используяevent.stopPropagation() метод. Как видите, вы передаете объект события в качестве аргумента функции. Вы все еще хотите поймать событие на<a> и затем остановите его распространение, вот так:

$('#menupull').click( function() {
    alert( 'pullmenu clicked' );
});
$('#menupull a').click( function(e) {
    e.stopPropagation();
});

Редактировать:

Другой способ исправить это - использовать другой селектор, который присоединяет прослушиватель событий ко всем дочерним узлам элемента, кроме<a> элементы, однако это будетне работать, когда вы нажимаете на область элемента без дочерних узлов.

$('#menupull>*:not(a)').click( function(event) {
        alert( 'pullmenu clicked' );
});

http://jsfiddle.net/zCsLm/3/

 Randy the Dev02 окт. 2010 г., 03:21
В то время как его селектор неверен, всплеск событий является причиной неожиданного поведения. Но да, это также можно исправить с помощью лучшего селектора.
 Peter Ajtai02 окт. 2010 г., 03:08
Ваш метод работает, но причиной проблемы OP является неправильный селектор, а не распространение событий. Это на самом деле происходит, так как `$ ('# menupull: not (a)')` эквивалентно `$ ('# menupull')`, потому что#menupull этоdiv и неa.
 QMaster02 сент. 2014 г., 12:54
+1 это умное решение, и я помню, как использовать его для решения других вопросов, но я думаю, что путь @charlesleaf более безопасен, хотя и прост. Я думаю, что stopPropagation может повлиять на некоторые другие обратные вызовы, которые могут нам понадобиться. Я прав? Не могли бы вы объяснить подробнее об этом?

$('#menupull:not(a)') выбирает элемент сid изmenupull это неA стихия .... ну понятно#menupull этоdiv., так что предыдущий не очень много. Вместо этого проверьте, чтоtarget клика есть.

Самый простой способ - просто сделать предупреждение только в тех случаях, когдаA была нажата. ЕслиA по нажатию все идет как обычно (по ссылке и т. д.). Вы можете достичь этого с помощьюevent.target.nodeName:

$(function() {

    $('#menupull').click( function(event) {

        if (event.target.nodeName != 'A') {
            alert( 'pullmenu clicked' ); }
    });
});​
Пример jsFiddle

Ваш ответ на вопрос