Question

我对jQuery的mouseover和mouseout方法有疑问。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#land {
    background: #FFCC33;
    width: 200px;
    height: 200px;
}

#water {
    background: #33CCCC;
    width: 150px;
    height: 150px;
}

#island {
    background: #33FF33;
    width: 100px;
    height: 100px;
}
</style>
</head>
<body>
    <div id="land">
        <div id="water">
            <div id="island"></div>
        </div>
    </div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function() {
        $("#land").on({
            "mouseover" : function() {
                console.log("land - mouse over");
            },
            "mouseout" : function() {
                console.log("land - mouse out");
            }
        });
    });
</script>
</html>

当鼠标移动'land'时 - ＆gt; '水'鼠标在事件发生。当'水' - ＆gt;发生'岛'鼠标移除和鼠标悬停事件。

为什么发生鼠标悬停事件？

Answer 1

这就是定义mouseover和mouseout的方式，当你移动到后代也会触发它，并且当后代发生事件时会触发任何附加到父项的处理程序

将指针设备移动到。时会触发mouseover事件将侦听器附加到其子节点上的元素。

如果您不希望这种情况发生，请使用mouseenter和mouseleave个事件

当指点设备（通常是鼠标）时会触发mouseenter事件   被移动到附加了侦听器的元素上。
  与mouseover类似，它的不同之处在于它并不是bubble   当指针从其后代之一移动时，不会发送该指针。   物理空间到自己的物理空间。

所以，当＆＃39; water＆＃39; - ＆GT; ＆＃39;岛＆＃39;发生mouseout时water触发了mouseover，island触发了land，这些事件导致$(document).ready(function() { $("#land").on('mouseover mouseout mouseenter mouseleave', function(e) { console.log(e.type, e.target.id) }); });附加的处理程序被触发。

＆＃13;

#land {
  background: #FFCC33;
  width: 200px;
  height: 200px;
}
#water {
  background: #33CCCC;
  width: 150px;
  height: 150px;
}
#island {
  background: #33FF33;
  width: 100px;
  height: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="land">
  <div id="water">
    <div id="island"></div>
  </div>
</div>

＆＃13;

    <?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

    <!-- The definition of the Root Spring Container shared by all Servlets and Filters -->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>/WEB-INF/spring/root-context.xml</param-value>
    </context-param>

    <!-- Creates the Spring Container shared by all Servlets and Filters -->
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>

    <!-- Processes application requests -->
    <servlet>
        <servlet-name>appServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>/WEB-INF/spring/appServlet/servlet-context.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>appServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

</web-app>

＆＃13;

为什么jquery的mouseover（）事件发生在内部元素？

1 个答案: