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

Question

我的HTML代码是这样的

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

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

我有一个 JQuery 可以在 mouseover 时为每个元素添加边框，并在 mouseout 时删除边框

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
}