Question

<section id="first">
    <h1>Colors</h1>
    <section id="red">
        <h1>Red</h1>
        <section id="apples">
            <h1>Apples</h1>
        </section>
        <section id="apples">
            <h1>Strawberries</h1>
        </section>
    </section>
    <section id="orange">
        <h1>Orange</h1>
    </section>
</section>

$('section').click(function(){
    $(this).css('color','yellow');
});

http://jsfiddle.net/J9kAV/

我希望section在点击时变为黄色。但是，由于$('section')也可以引用它们的父元素，因此它也会将CSS应用于它们。

如何告诉jQuery仅将CSS应用于单击的子元素而不是父元素？

我不想使用$('section section')，因为如果明确点击它们，我也希望父元素变黄。所以我需要一个JavaScript / jQuery解决方案，而不是选择器或HTML解决方案。

Answer 1

使用此：

e.stopPropagation();

示例： http://jsfiddle.net/8KLEK/

Answer 2

试试这个：

$('section').click(function(e){
    e.stopImmediatePropagation();
    $(this).css('color','yellow');
});

Answer 3

正确的方法是将'this'改为'e.target';

$('section').click(function (e) {
    $(e.target).css('color','yellow'); 
});

http://jsfiddle.net/J9kAV/5/

有关其原因的更多信息。 https://developer.mozilla.org/en-US/docs/Web/API/event.target

即使事件处理程序也以父对象为目标，也只定位子元素

3 个答案: