1 line
3.9 KiB
JSON
1 line
3.9 KiB
JSON
{"name":"mouseout","type":"method","title":".mouseout()","deprecated":null,"removed":null,"desc":"Bind an event handler to the \"mouseout\" JavaScript event, or trigger that event on an element.","categories":["events/mouse-events","version/1.0","version/1.4.3"],"entries":[{"return":"jQuery","signatures":[{"added":"1.0","argument":{"desc":"A function to execute each time the event is triggered.","name":"handler(eventObject)","type":"Function"}},{"added":"1.4.3","argument":[{"desc":"An object containing data that will be passed to the event handler.","name":"eventData","type":"PlainObject","optional":"true"},{"desc":"A function to execute each time the event is triggered.","name":"handler(eventObject)","type":"Function"}]},{"added":"1.0"}],"examples":{"desc":"Show the number of times mouseout and mouseleave events are triggered.\n <code>mouseout</code> fires when the pointer moves out of the child element as well, while <code>mouseleave</code> fires only when the pointer moves out of the bound element.","css":"\n div.out {\n width: 40%;\n height: 120px;\n margin: 0 15px;\n background-color: #d6edfc;\n float: left;\n }\n div.in {\n width: 60%;\n height: 60%;\n background-color: #fc0;\n margin: 10px auto;\n }\n p {\n line-height: 1em;\n margin: 0;\n padding: 0;\n }\n","code":"\nvar i = 0;\n$( \"div.overout\" )\n .mouseout(function() {\n $( \"p:first\", this ).text( \"mouse out\" );\n $( \"p:last\", this ).text( ++i );\n })\n .mouseover(function() {\n $( \"p:first\", this ).text( \"mouse over\" );\n });\n\nvar n = 0;\n$( \"div.enterleave\" )\n .on( \"mouseenter\", function() {\n $( \"p:first\", this ).text( \"mouse enter\" );\n })\n .on( \"mouseleave\", function() {\n $( \"p:first\", this ).text( \"mouse leave\" );\n $( \"p:last\", this ).text( ++n );\n });\n","html":"\n<div class=\"out overout\">\n <p>move your mouse</p>\n <div class=\"in overout\"><p>move your mouse</p><p>0</p></div>\n <p>0</p>\n</div>\n\n<div class=\"out enterleave\">\n <p>move your mouse</p>\n <div class=\"in enterleave\"><p>move your mouse</p><p>0</p></div>\n <p>0</p>\n</div>\n"},"longdesc":"\n <p>This method is a shortcut for <code>.on( \"mouseout\", handler )</code> in the first two variation, and <code>.trigger( \"mouseout\" )</code> in the third.</p>\n <p>The <code>mouseout</code> event is sent to an element when the mouse pointer leaves the element. Any HTML element can receive this event.</p>\n <p>For example, consider the HTML:</p>\n <pre><code>\n<div id=\"outer\">\n Outer\n <div id=\"inner\">\n Inner\n </div>\n</div>\n<div id=\"other\">\n Trigger the handler\n</div>\n<div id=\"log\"></div>\n </code></pre>\n <p class=\"image\">\n <img src=\"/resources/0042_05_07.png\" alt=\"\"/>\n </p>\n <p>The event handler can be bound to any element:</p>\n <pre><code>\n$( \"#outer\" ).mouseout(function() {\n $( \"#log\" ).append( \"Handler for .mouseout() called.\" );\n});\n </code></pre>\n <p>Now when the mouse pointer moves out of the <samp>Outer</samp> <code><div></code>, the message is appended to <code><div id=\"log\"></code>. To trigger the event manually, apply <code>.mouseout()</code> without an argument::</p>\n <pre><code>\n$( \"#other\" ).click(function() {\n $( \"#outer\" ).mouseout();\n});\n </code></pre>\n <p>After this code executes, clicks on <samp>Trigger the handler</samp> will also append the message.</p>\n <p>This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves out of the <samp>Inner</samp> element in this example, a <code>mouseout</code> event will be sent to that, then trickle up to <samp>Outer</samp>. This can trigger the bound <code>mouseout</code> handler at inopportune times. See the discussion for <code>.<a href=\"/mouseleave/\">mouseleave</a>()</code> for a useful alternative.</p>\n "}]} |