如何仅在子元素上触发 JQuery 事件？

Question

我的HTML代码是这样的

<div>
    <p>Parent Element</p>

    <div>
        <p>Child Element</p>
    </div>
</div>

我有一个 JQuery 在鼠标悬停时为每个元素添加边框并在鼠标移开时删除边框

var border = '';

// On mouseover
$('*').on('mouseover', Hovers);

function Hovers()
{
    border = $(this).css('border');
    $(this).css('border', '1px dashed black');
}

// On mouseout
$('*').on('mouseout', Outs);

function Outs()
{
    $(this).css('border', border);
}

它按预期添加和删除边框，但每当我将鼠标悬停在子元素上时，它也会为父元素添加边框。我只需要悬停的最后一个元素就有边框。有实现此目标的想法吗？

Answer 1

您需要使用stopPropagation()来阻止子级将事件链式传递给父级

function Hovers(e) {
    border = $(this).css('border');
    $(this).css('border', '1px dashed black');
    e.stopPropagation(); // <--- add this
}

如何仅在子元素上触发 JQuery 事件？

How can I fire JQuery event only on child element?

jquery

jquery-ui

jquery-plugins