在下有个问题想请教，还望指点。
如下代码：
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
先谢过了。
你用的什么浏览器？我在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('enter')){<br> elem.addClass('enter');<br> $("#log").append(elem.attr('id')+"触发了mouseenter事件<br/>");<br><br> }<br> };<br><br> function mouseLeave(event){<br> var elem = $(event.target);<br> if(elem.hasClass('enter')){<br> elem.removeClass('enter');<br> $("#log").append(elem.attr('id')+"触发了mouseLeave事件<br/>");<br><br> }<br> };<br> /*$('#div111').hover(mouseEnter, mouseLeave);<br> $('#div222').hover(mouseEnter, mouseLeave);<br> $('#div333').hover(mouseEnter, function(event){<br> mouseLeave(event);<br> $(this).remove();<br> });*/<br> $('#div111').mouseenter(mouseEnter);<br><br> $('#div222').mouseenter(mouseEnter);<br><br> $('#div333').mouseenter(mouseEnter);<br><br> $('#div111').mouseleave(mouseLeave);<br><br> $('#div222').mouseleave(mouseLeave);<br><br> $('#div333').mouseleave(function(event){<br><br> mouseLeave(event);<br><br> $(this).remove();<br><br> });<br> $('#div333').click(function(event){<br><br> event.stopPropagation();<br><br> $(this).remove();<br><br> });<br><br>
[/code]
[code="js"]<!DOCTYPE html>
test
<br> #div111{<br> width:200px; height :200px ; background :red; margin :100px auto auto 100px;<br> }<br> #div222{<br> width:100px; height :100px; background :yellow;<br> }<br> #div333{<br> width:50px; height :50px; background :blue;<br> }<br>
<br> $(document).mouseover(function(event){<br> var id = event.target.id;<br> switch(id){<br> case 'div111':<br> case 'div222':<br> case 'div333':<br> $("#log").append(id+"触发了onmouseOver事件<br/>");<br> break;<br> }<br> });<br> $(document).mouseout(function(event){<br> var target = event.target,<br> id = target.id;<br> switch(id){<br> case 'div111':<br> case 'div222':<br> $("#log").append(id+"触发了onmouseOut事件<br/>");<br> break;<br> case 'div333':<br> $("#log").append(id+"触发了onmouseOut事件<br/>");<br> $(target).remove();<br> break;<br> }<br> });<br> $('#div333').click(function(event){<br> event.stopPropagation();<br> $(this).remove();<br> });<br>
[/code]
你这人还挺无聊，mouseenter和mouseover，mouseleave和mouseout的区别仅仅在于有没有冒泡，这种需求下放着冒泡不用，非要把代码写得一大堆你才舒服吗。。
[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(elem){<br> var id = elem.id;<br> $("#log").append(id+"触发了mouseenter事件<br/>");<br> };<br> function mouseLeave(elem){<br> var id = elem.id;<br> $("#log").append(id+"触发了mouseLeave事件<br/>");<br> };<br> $('#div111').mouseenter(function(){<br> mouseEnter(this);<br> });<br> $('#div222').mouseenter(function(){<br> mouseEnter(this);<br> });<br> $('#div333').mouseenter(function(){<br> mouseEnter(this);<br> });<br> $('#div111').mouseleave(function(){<br> mouseLeave(this);<br> });<br> $('#div222').mouseleave(function(){<br> mouseLeave(this);<br> });<br> $('#div333').mouseleave(function(){<br> mouseLeave(this);<br> $(this).remove();<br> }); <br> $('#div333').click(function(event){<br><br> event.stopPropagation();<br><br> $(this).remove();<br><br> });<br><br>
[/code]
这样写能满足你的欲望么？
我怀疑你有没有真正测试我的代码？
鼠标从div333移出到div222或div111，div333销毁后会触发的是div222或div111的mouseleave事件，谢谢！
我怀疑你有没有真正测试我的代码？
鼠标从div333移出到div222或div111，div333销毁后会触发的是div333的mouseleave事件，谢谢！