Home > Article > Web Front-end > About how jquery prevents the corresponding mouseout event of child elements

About how jquery prevents the corresponding mouseout event of child elements

黄舟Original: 2017-06-28 11:43:201261browse

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

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：8 ways to get HTML DOM elements using javascriptNext article：8 ways to get HTML DOM elements using javascript

See more

About how jquery prevents the corresponding mouseout event of child elements

Related articles