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 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）
  • ¥15 AIC3204的示例代码有吗，想用AIC3204测量血氧，找不到相关的代码。