mouseenter与mouseleave

最新推荐文章于 2024-09-12 16:31:59 发布

sunny327

最新推荐文章于 2024-09-12 16:31:59 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： mouseenter mouseleave return false

本文链接：https://blog.youkuaiyun.com/sunny327/article/details/51509306

本文介绍了一种使用mouseenter和mouseleave事件优化鼠标交互的方法，避免了mouseover和mouseout事件的频繁触发导致的问题。通过具体实例展示了如何在鼠标移入元素时添加按钮，鼠标移出时删除按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段时间在做鼠标放上一个元素上添加一个按钮，移出删除此按钮。当时做的时候想到了mouseover与mouseout，并且也做了阻止冒泡，可是当在元素上移动时就会不断执行mouseover与mouseout，并且元素底部会出现空的带双引号的空元素节点。最后想到了用mouseenter与mouseleave,当鼠标移到元素上（mouseenter）向body中append此按钮，mouseleave时remove此按钮。代码如下：

oBlog_code.hoverStart = (function()
        {
            $(document).delegate('.dp-highlighter,.prettyprint','mouseenter',function()
            {
                $(this).append('<div class="save_code">保存到我的代码片</div>');
                return false;
            });
            $(document).delegate('.dp-highlighter,.prettyprint','mouseleave',function()
            {
                $(this).find('.save_code').remove();
                return false;
            });
        })();