Featured post
jquery - trigger alert on div's mouse out -
im testing out here,so please excuse css rules.i have got ul list in div,and im trying trigger alert on mouseout of div alert triggers each time mouseout li items in ul. please tell me reason behind it? guess bubbling im not sure.
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>untitled document</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style> #box{ cursor:pointer;width:300px;height:500px;background-color:#f1e0bb; } ul#mylist{ list-style:none;padding-top:20px; } ul#mylist li{ font-family:arial;font-size:20px;font-weight:bold;height:40px;cursor:pointer;border:solid 1px #000; } </style> </head> <body> <div id="box"> <ul id="mylist"> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 15</li> </ul> </div> </body> </html>
jquery script used
$('#box').mouseout(function(){ alert("ccc"); })
use mouseleave
event here instead, doesn't fire when leaving children:
$('#box').mouseleave(function(){ alert("ccc"); });
you're assumption bubbling correct, it's child elements bubbling that's triggering handler. .mouseleave()
docs:
the
mouseleave
event differsmouseout
in way handles event bubbling. ifmouseout
used in example, when mouse pointer moved out of inner element, handler triggered. undesirable behavior.mouseleave
event, on other hand, triggers handler when mouse leaves element bound to, not descendant. in example, handler triggered when mouse leaves outer element, not inner element.
- Get link
- X
- Other Apps
Comments
Post a Comment