http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FjQuery%2FEvent_Mouse
JavaScript DHTML/jQuery/Event Mouse - История изменений
2026-04-04T15:14:58Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/Event_Mouse&diff=2806&oldid=prev
в 10:02, 26 мая 2010
2010-05-26T10:02:45Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 10:02, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/Event_Mouse&diff=2807&oldid=prev
Admin: 1 версия
2010-05-26T07:23:51Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Bounced menu==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html lang="en"><br />
<head><br />
<title></title><br />
<link type="text/css" href="js/themes/base/ui.all.css" rel="stylesheet" /><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript" src="js/ui/effects.core.js"></script><br />
<script type="text/javascript" src="js/ui/effects.bounce.js"></script><br />
<link type="text/css" href="js/demos.css" rel="stylesheet" /><br />
<script type="text/javascript"><br />
$(function() {<br />
$("#menu a").mouseover(function() {<br />
$(this).effect("bounce");<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<div id="menu"><br />
<a href="#">1</a><br />
<a href="#">2</a><br />
</div> <br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Cascaded Mouse leave event==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mouseover(function(){<br />
$(this).append("<span style="color:#F00;">mouseover.</span>");<br />
}).mouseleave(function(){<br />
$(this).append("<span style="color:#00F;">mouseleave</span>");<br />
});<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div>adsf</div><br />
<br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Mouse down event==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mouseup(function(){<br />
$(this).append("<span style="color:#F00;">Mouse up.</span>");<br />
}).mousedown(function(){<br />
$(this).append("<span style="color:#00F;">Mouse down.</span>");<br />
});<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div>adsf</div><br />
<br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==mousedown(fn) event fires when the pointing device button is pressed over an element.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("p").mouseup(function(){<br />
$(this).append("<span style="color:#F00;">Mouse up.</span>");<br />
}).mousedown(function(){<br />
$(this).append("<span style="color:#00F;">Mouse down.</span>");<br />
});<br />
<br />
});<br />
</script><br />
<style><br />
div.dbl { background:yellow;color:black; }<br />
<br />
</style><br />
</head><br />
<body><br />
<body><br />
<p>Press mouse and release here.</p><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Mouse enter==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mouseover(function(){<br />
$(this).append("<span style="color:#F00;">mouseover.</span>");<br />
}).mouseenter(function(){<br />
$(this).append("<span style="color:#00F;">mouseenter</span>");<br />
});<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div>adsf</div><br />
<br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Mouse enter event==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("h1").bind("mouseenter mouseleave", function(e){<br />
var str = "( " + e.pageX + ", " + e.pageY + " )";<br />
$("h1").text("Click happened! " + str);<br />
});<br />
<br />
<br />
});<br />
</script><br />
<br />
</head><br />
<body><br />
<body><br />
<div><h1>header 1</h1></div><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==mouseenter event triggering==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mouseenter(function(e){<br />
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";<br />
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";<br />
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);<br />
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);<br />
});<br />
<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p> <br />
<span>Move the mouse over the div.</span><br />
<span>&nbsp;</span><br />
</p><br />
<div>asdf</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Mouse leave event==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("h1").bind("mouseenter mouseleave", function(e){<br />
var str = "( " + e.pageX + ", " + e.pageY + " )";<br />
$("h1").text("Click happened! " + str);<br />
});<br />
<br />
<br />
});<br />
</script><br />
<br />
</head><br />
<body><br />
<body><br />
<div><h1>header 1</h1></div><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==mouseleave event triggering==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mouseleave(function(e){<br />
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";<br />
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";<br />
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);<br />
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);<br />
});<br />
<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p> <br />
<span>Move the mouse over the div.</span><br />
<span>&nbsp;</span><br />
</p><br />
<div>asdf</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==mousemove(fn) event fires when mouse is moved==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mousemove(function(e){<br />
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";<br />
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";<br />
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);<br />
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);<br />
});<br />
<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p> <br />
<span>Move the mouse over the div.</span><br />
<span>&nbsp;</span><br />
</p><br />
<div>asdf</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Mouse out event==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mouseover(function(){<br />
$(this).append("<span style="color:#F00;">mouseover.</span>");<br />
}).mouseout(function(){<br />
$(this).append("<span style="color:#00F;">mouseout</span>");<br />
});<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div>adsf</div><br />
<br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==mouseout(fn) event fires when mouse is moved away from an element.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mouseout(function(e){<br />
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";<br />
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";<br />
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);<br />
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);<br />
});<br />
<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p> <br />
<span>Move the mouse over the div.</span><br />
<span>&nbsp;</span><br />
</p><br />
<div>asdf</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Mouse over action==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("b").mouseover(function () {<br />
$(this).css({"background-color" : "yellow", "font-weight" : "bolder"});<br />
});<br />
});<br />
</script><br />
<br />
</head><br />
<body><br />
<body><br />
<br />
<b>Hello</b><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Mouse over event==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mouseover(function(){<br />
$(this).append("<span style="color:#F00;">mouseover.</span>");<br />
}).mouseenter(function(){<br />
$(this).append("<span style="color:#00F;">mouseenter</span>");<br />
});<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div>adsf</div><br />
<br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==mouseover event triggering==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mouseover(function(e){<br />
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";<br />
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";<br />
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);<br />
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);<br />
});<br />
<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p> <br />
<span>Move the mouse over the div.</span><br />
<span>&nbsp;</span><br />
</p><br />
<div>asdf</div><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Mouse up event==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mouseup(function(){<br />
$(this).append("<span style="color:#F00;">Mouse up.</span>");<br />
}).mousedown(function(){<br />
$(this).append("<span style="color:#00F;">Mouse down.</span>");<br />
});<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div>adsf</div><br />
<br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Show texts when mouseup and mousedown event triggering.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("p").mouseup(function(){<br />
$(this).append("<span style="color:#F00;">Mouse up.</span>");<br />
}).mousedown(function(){<br />
$(this).append("<span style="color:#00F;">Mouse down.</span>");<br />
});<br />
<br />
});<br />
</script><br />
<style><br />
div.dbl { background:yellow;color:black; }<br />
<br />
</style><br />
</head><br />
<body><br />
<body><br />
<p>Press mouse and release here.</p><br />
</body><br />
</html><br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Show the mouse coordinates when the mouse is moved over the yellow div. Coordinates are relative to the window which in this case is the iframe.==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mousemove(function(e){<br />
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";<br />
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";<br />
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);<br />
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);<br />
});<br />
<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p> <br />
<span>Move the mouse over the div.</span><br />
<span>&nbsp;</span><br />
</p><br />
<div>asdf</div><br />
</body><br />
</html><br />
<br />
<br />
</source></div>
Admin