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事件？

1 个答案: