njltwo 2011-09-14 19:33
浏览 547
已采纳

当使用子元素的mouseleave销毁子元素自身时如何不触发父元素的mouseenter事件

在下有个问题想请教，还望指点。

如下代码：


function mouseEnter(id) { $("#log").append(id+"触发了onmouseEnter事件<br/>"); } function mouseLeave(id) { $("#log").append(id + "触发了onmouseLeave事件<br/>"); } function destroySelf(obj) { $(obj).remove(); }

说明：这是嵌套的三层div。div111最外层，div222中间层，div333最内层。

想要的结果是：当鼠标从div333移出（mouseleave）时，销毁（使用$().delete()）自身（div333），但不能触发其父div（div111和div222）的mouseenter事件。

请问如何实现？？？

请发送答案至： njl_041x@163.com

先谢过了。

  • 写回答

5条回答 默认 最新

  • 峭沙 2011-09-15 11:25
    关注

    你用的什么浏览器？我在firefox下很正常，不过当点击删除的时候确实存在问题，这是mouseenter的实现机制所致，有兴趣可以去研究源码。下面放出最终版本，应该不会有什么问题了。[code="js"]<!DOCTYPE html>







    test



    <br><br> #div111{<br><br> width:200px; height :200px ; background :red; margin :100px auto auto 100px;<br><br> }<br><br> #div222{<br><br> width:100px; height :100px; background :yellow;<br><br> }<br><br> #div333{<br><br> width:50px; height :50px; background :blue;<br><br> }<br><br>
















    <br><br> function mouseEnter(event){<br> var elem = $(event.target);<br> if(!elem.hasClass(&#39;enter&#39;)){<br> elem.addClass(&#39;enter&#39;);<br> $(&quot;#log&quot;).append(elem.attr(&#39;id&#39;)+&quot;触发了mouseenter事件<br/>&quot;);<br><br> }<br> };<br><br> function mouseLeave(event){<br> var elem = $(event.target);<br> if(elem.hasClass(&#39;enter&#39;)){<br> elem.removeClass(&#39;enter&#39;);<br> $(&quot;#log&quot;).append(elem.attr(&#39;id&#39;)+&quot;触发了mouseLeave事件<br/>&quot;);<br><br> }<br> };<br> /*$(&#39;#div111&#39;).hover(mouseEnter, mouseLeave);<br> $(&#39;#div222&#39;).hover(mouseEnter, mouseLeave);<br> $(&#39;#div333&#39;).hover(mouseEnter, function(event){<br> mouseLeave(event);<br> $(this).remove();<br> });*/<br> $(&#39;#div111&#39;).mouseenter(mouseEnter);<br><br> $(&#39;#div222&#39;).mouseenter(mouseEnter);<br><br> $(&#39;#div333&#39;).mouseenter(mouseEnter);<br><br> $(&#39;#div111&#39;).mouseleave(mouseLeave);<br><br> $(&#39;#div222&#39;).mouseleave(mouseLeave);<br><br> $(&#39;#div333&#39;).mouseleave(function(event){<br><br> mouseLeave(event);<br><br> $(this).remove();<br><br> });<br> $(&#39;#div333&#39;).click(function(event){<br><br> event.stopPropagation();<br><br> $(this).remove();<br><br> });<br><br>



    [/code]
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题？

悬赏问题

  • ¥15 八爪鱼爬数据为什么自己停了
  • ¥15 交替优化波束形成和ris反射角使保密速率最大化
  • ¥15 树莓派与pix飞控通信
  • ¥15 自动转发微信群信息到另外一个微信群
  • ¥15 outlook无法配置成功
  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率