イベントmouseenterとイベントmouseleave
2342 ワード
マウス操作を容易にするために、IEはモバイルセンターとmouseleaveイベントを実現したが、ExtJsは他のブラウザからのこの2つのイベントへのサポートを実現した.ExtJsを使用していない場合は、ext-base-event.jsの中の自分を参照して実現します.
mouseenterはmouseoverと違って、初めてマウスがノード領域に入った時に触発され、その後ノード領域内(サブノード間)を移動する時に触発されないが、onmouseoverはイベントの泡発生メカニズムにより、毎回異なるノードに移動するたびに触発され、予期される効果を達成できない場合が多い.同じ原理でmouseleaveとmouseoutも似ています.
この二つの事件の詳細についてはGoodbye mouseover，hello mouseenterを参照してください. この記事は、この2つのイベントの実現と利用の利点を詳細に紹介している.
mouseenterはmouseoverと違って、初めてマウスがノード領域に入った時に触発され、その後ノード領域内(サブノード間)を移動する時に触発されないが、onmouseoverはイベントの泡発生メカニズムにより、毎回異なるノードに移動するたびに触発され、予期される効果を達成できない場合が多い.同じ原理でmouseleaveとmouseoutも似ています.
この二つの事件の詳細についてはGoodbye mouseover，hello mouseenterを参照してください. この記事は、この2つのイベントの実現と利用の利点を詳細に紹介している.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> mouseenter mouseleave</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<table width="500" border="1" onmouseleave = "javascript:alert(' table');" >
<tr>
<td onmouseenter = "javascript:alert(' td');">
</td>
<td onmouseleave = "javascript:alert(' td');">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<br>
<table width="500" border="1" onmouseout="alert(' ')" onmouseover="alert(' ')" >
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</body>
</html>