问题描述
在下有个问题想请教，还望指点。如下代码：<div id="div111" style ="width:200px; height :200px ; background :red; margin :100px auto auto 100px;" onmouseenter="mouseEnter(this.id);" onmouseleave="mouseLeave(this.id);"><div id="div222" style ="width:100px; height :100px; background :yellow;" onmouseenter="mouseEnter(this.id);" onmouseleave="mouseLeave(this.id);"><div id="div333" style =" width:50px; height :50px; background :blue;" onmouseenter="mouseEnter(this.id);" onmouseleave="destroySelf(this);" onclick ="destroySelf(this);"></div></div></div><p id="log"></p><script type ="text/javascript" > function mouseEnter(id) { $("#log").append(id+"触发了onmouseEnter事件<br/>"); } function mouseLeave(id) { $("#log").append(id + "触发了onmouseLeave事件<br/>"); } function destroySelf(obj) { $(obj).remove(); }</script>说明：这是嵌套的三层div。div111最外层，div222中间层，div333最内层。想要的结果是：当鼠标从div333移出（mouseleave）时，销毁（使用$().delete()）自身（div333），但不能触发其父div（div111和div222）的mouseenter事件。请问如何实现？？？请发送答案至： njl_041x@163.com先谢过了。 问题补充：非常感谢你的回答，不过你有点偷梁换柱了。不是使用mouseover和mouseout事件，而是使用mouseenter和mouseleave事件axiheyhey 写道
解决方案
你用的什么浏览器？我在firefox下很正常，不过当点击删除的时候确实存在问题，这是mouseenter的实现机制所致，有兴趣可以去研究源码。下面放出最终版本，应该不会有什么问题了。<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <script type="text/javascript" src="jquery.js"></script> <style> #div111{ width:200px; height :200px ; background :red; margin :100px auto auto 100px; } #div222{ width:100px; height :100px; background :yellow; } #div333{ width:50px; height :50px; background :blue; } </style> </head> <body> <div id="div111"> <div id="div222"> <div id="div333"></div> </div> </div> <p id="log"></p> <script type ="text/javascript" > function mouseEnter(event){ var elem = $(event.target); if(!elem.hasClass('enter')){ elem.addClass('enter'); $("#log").append(elem.attr('id')+"触发了mouseenter事件<br/>"); } }; function mouseLeave(event){ var elem = $(event.target); if(elem.hasClass('enter')){ elem.removeClass('enter'); $("#log").append(elem.attr('id')+"触发了mouseLeave事件<br/>"); } }; /*$('#div111').hover(mouseEnter, mouseLeave); $('#div222').hover(mouseEnter, mouseLeave); $('#div333').hover(mouseEnter, function(event){ mouseLeave(event); $(this).remove(); });*/ $('#div111').mouseenter(mouseEnter); $('#div222').mouseenter(mouseEnter); $('#div333').mouseenter(mouseEnter); $('#div111').mouseleave(mouseLeave); $('#div222').mouseleave(mouseLeave); $('#div333').mouseleave(function(event){ mouseLeave(event); $(this).remove(); }); $('#div333').click(function(event){ event.stopPropagation(); $(this).remove(); }); </script> </body> </html>
解决方案二：
我怀疑你有没有真正测试我的代码？ 鼠标从div333移出到div222或div111，div333销毁后会触发的是div333的mouseleave事件，谢谢！
解决方案三：
我怀疑你有没有真正测试我的代码？鼠标从div333移出到div222或div111，div333销毁后会触发的是div222或div111的mouseleave事件，谢谢！
解决方案四：
你这人还挺无聊，mouseenter和mouseover，mouseleave和mouseout的区别仅仅在于有没有冒泡，这种需求下放着冒泡不用，非要把代码写得一大堆你才舒服吗。。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <script type="text/javascript" src="jquery.js"></script> <style> #div111{ width:200px; height :200px ; background :red; margin :100px auto auto 100px; } #div222{ width:100px; height :100px; background :yellow; } #div333{ width:50px; height :50px; background :blue; } </style> </head> <body> <div id="div111"> <div id="div222"> <div id="div333"></div> </div> </div> <p id="log"></p> <script type ="text/javascript" > function mouseEnter(elem){ var id = elem.id; $("#log").append(id+"触发了mouseenter事件<br/>"); }; function mouseLeave(elem){ var id = elem.id; $("#log").append(id+"触发了mouseLeave事件<br/>"); }; $('#div111').mouseenter(function(){ mouseEnter(this); }); $('#div222').mouseenter(function(){ mouseEnter(this); }); $('#div333').mouseenter(function(){ mouseEnter(this); }); $('#div111').mouseleave(function(){ mouseLeave(this); }); $('#div222').mouseleave(function(){ mouseLeave(this); }); $('#div333').mouseleave(function(){ mouseLeave(this); $(this).remove(); }); $('#div333').click(function(event){ event.stopPropagation(); $(this).remove(); }); </script> </body> </html> 这样写能满足你的欲望么？
解决方案五：
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test</title> <script type="text/javascript" src="jquery.js"></script> <style> #div111{ width:200px; height :200px ; background :red; margin :100px auto auto 100px; } #div222{ width:100px; height :100px; background :yellow; } #div333{ width:50px; height :50px; background :blue; } </style> </head> <body><div id="div111"> <div id="div222"> <div id="div333"></div> </div> </div> <p id="log"></p> <script type ="text/javascript" > $(document).mouseover(function(event){var id = event.target.id;switch(id){case 'div111':case 'div222':case 'div333':$("#log").append(id+"触发了onmouseOver事件<br/>");break;}});$(document).mouseout(function(event){var target = event.target,id = target.id;switch(id){case 'div111':case 'div222':$("#log").append(id+"触发了onmouseOut事件<br/>");break;case 'div333':$("#log").append(id+"触发了onmouseOut事件<br/>");$(target).remove();break;}});$('#div333').click(function(event){event.stopPropagation();$(this).remove();});</script> </body></html>