jquery - как выбрать элемент и все дочерние элементы, кроме конкретного дочернего - PullRequest
4 голосов
/ 09 июля 2010

У меня есть событие .mouseover (), запущенное на всех элементах класса 'node'. Он работает нормально, а также срабатывает, когда пользователь наводит курсор на любой дочерний элемент .node. Это хорошо работает для меня, однако я не хочу, чтобы это событие инициировалось, если пользовательская мышь указывает на определенного дочернего элемента, а именно изображение.

Почему селектор $ ('. Node: not (img)') не работает?

Как ни странно, он работает, когда я пробую его на http://www.woods.iki.fi/interactive-jquery-tester.html,, но не в моей реальной реализации.

Мой HTML:

    <div id="container">
            <div class="node" id="abc">
            <h2>Node Title</h2>
            <div class="nodeChildren">
                    <h3 id="a1">Some text</h3>
                    <h3 id="a2">Some text</h3>
                    <h3 id="a3">Some text</h3>
            </div>
            <img src="diagonal-left.gif" />
            </div>
    </div>

Мой jquery:

    //start with third tier not visible
    $('.nodeChildren').hide();

    $('.node :not(img)').mouseover(function(){
            $(this).children('div').show();
    });  

    $('.node').mouseout(function() {
            $('.nodeChildren').hide();
    }); 
* * 1016});

Мои неудачные попытки

$('.node :not(img)') //no mouseover is triggered

//for the following selectors, the mouseover event is still triggered on img
$('.node').not('img') 
$('.node').not($('.node').children('img'))

Спасибо за любую помощь:)

Ответы [ 2 ]

3 голосов
/ 09 июля 2010

Проблема в том, что событие «пузырится» до родителей, которое вызывает мышь.Чтобы остановить это, вам нужно добавить указатель мыши к img.

$(".node img").bind("mouseover", function(event) {
  event.stopPropagation();
});
0 голосов
/ 09 июля 2010

в функции обратного вызова bind вы можете проверить цель.в твоем случае как то так

$(".node").bind('mouseover',function(e){

    if(e.target.nodeName != 'IMG'){
        $(this).children('div').show();
    }

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...