About how jquery prevents the corresponding mouseout event of child elements-JS Tutorial-php.cn

About how jquery prevents the corresponding mouseout event of child elements

黄舟

Release： 2017-06-28 11:43:20

Original

1282 people have browsed it

How jquery prevents child elements from corresponding mouseoutEvent:
mouseout has a feature. When the mouse moves into a child element, this event will also be triggered. However, in actual applications, this feature is often not what we If you want, the following will introduce how to achieve this effect through code examples. The code examples are as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#father
{
  width:100px;
  height:100px;
  background:red;
}
#inner
{
  width:50px;
  height:50px;
  background:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#father").mouseout(function(e){ 
    evt = window.event||e; 
    var obj=evt.toElement||evt.relatedTarget; 
    var pa=this; 
    if(pa.contains(obj)) return false; 
    $(this).hide(); 
  });   
})
</script>
</head>
<body>
<p id="father">
  <p id="inner"></p>
</p>
</body>
</html

Copy after login

The above code realizes our requirements. When the mouse pointer moves into the sub-p, The event will not be triggered, but the event will be triggered when the mouse moves out of the parent p. Let's scan the process to achieve this effect.

1. Implementation principle:
The principle is very simple, that is, when the mouse pointer moves, it is judged whether the node related to the target node of the event is a child element. If it is a child element, the event will not be triggered. If If it is not a child element, the event is triggered.
2. Related reading:
1. For the mouseout event, please refer to the jQuery mouseout event chapter.
2.evt = window.event||e, please refer to the chapter What is the function of var ev=window.event||ev.
3. For the toElement attribute, please refer to the chapter toElement event attribute of javascript.
4.For the relatedTarget attribute, please refer to the chapter relatedTarget event attribute of javascript.
5.This can be found in the detailed explanation of this usage in javascript.
6.contains() function can be found in the jQuery.contains() method chapter.
7. For the hide() function, please refer to the jQuery hide() method chapter.

The above is the detailed content of About how jquery prevents the corresponding mouseout event of child elements. For more information, please follow other related articles on the PHP Chinese website!