`

JQuery mouseout 和 mouseleave事件的区别

jQueryJavaScriptHTML 
阅读更多

不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
  $("div.out").mouseout(function(){
    $(".out span").text(x+=1);
  });
  $("div.leave").mouseleave(function(){
    $(".leave span").text(y+=1);
  });
});
</script>
</head>
<body>
<p>不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。</p>
<p>只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。</p>
<div class="out" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseout 事件：<span></span></h2>
</div>
<div class="leave" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseleave 事件：<span></span></h2>
</div>
</body>
</html>

 

分享到：
| CSS 禅意花园
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    实例讲解jquery中mouseleave和mouseout的区别

    本文详细的介绍了关于jQuery中mouseleave和mouseout的区别，分享给大家供大家参考，具体内容如下 很多人在使用jQuery实现鼠标悬停效果时，一般都会用到mouseover和mouseout这对事件。而在实现过程中，可能会出现一些...

    JS中mouseover和mouseout多次触发问题如何解决

    6. 代码示例解析：通过实际的jQuery代码示例，可以看出如何通过将原有的mouseover和mouseout事件处理器更换为mouseenter和mouseleave事件处理器来解决问题。代码中的fadeIn()和fadeOut()方法被用来控制id2元素的显示...

    jquery中的mouseleave和mouseout的区别 模仿下拉框效果

    1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。 代码如下: ”sel_box”&gt; &lt;input type=”button” value=”请选择所属部门” ...

    jQuery中hover与mouseover和mouseout的区别分析

    与mouseover和mouseout不同，hover事件并不是原生JavaScript或jQuery内置的事件。hover事件是jQuery提供的一个便捷方法，它封装了mouseenter和mouseleave事件。mouseenter事件仅在鼠标指针从非元素区域直接进入到...

    鼠标经过子元素触发mouseout，mouseover事件的解决方案

    标题提到的问题是，当鼠标经过子元素时，意外触发了父元素的`mouseout`和`mouseover`事件，从而影响了预期的效果。下面将详细讨论这个问题以及解决方案。 首先，我们需要了解`mouseover`和`mouseout`事件的工作原理...

    经过绑定元素时会多次触发mouseover和mouseout事件

    总结来说，当面临因嵌套元素导致的 `mouseover` 和 `mouseout` 事件频繁触发的问题时，可以考虑使用jQuery的 `mouseenter` 和 `mouseleave` 或 `hover()` 方法来优化代码，提高用户体验。同时，为了确保在边界情况下...

    jQuery事件之鼠标事件

    - **定义**：这两个事件与`mouseover`和`mouseout`类似，但是它们不冒泡到父级元素。 - **示例**： ```javascript $('p').mouseenter(function(){ alert('mouseenter function is running!'); }).mouseleave...

    javascript中mouseover、mouseout使用详解

    在ie下有mouseenter 与 mouseleave事件来替代mouseover 和 mouseout。 网上很多说法，这两个事件只有ie支持，其他浏览器不支持。 但是我在最新版本的火狐与谷歌都支持了mouseenter 与 mouseleave！！！！！ 另外ie是...

    JavaScript和JQuery的鼠标mouse事件冒泡处理

    简单的鼠标移动事件： 进入 代码如下: mouseenter：不冒泡 mouseover: 冒泡 不论鼠标指针穿过被选元素或其子元素，都会...给一个嵌套的层级绑定mouseout事件，会发现mouseout事件与想象的不一样 代码如下: &lt;!DOC

    jquery事件

    jQuery提供了一些特殊的事件，如`mouseenter`和`mouseleave`（替代原生的`mouseover`和`mouseout`，避免因子元素导致的误触发），以及`load`、`unload`、`resize`、`scroll`等DOM或窗口事件。 7. **事件触发** ...

    jQuery用unbind方法去掉hover事件及其他方法介绍

    这种做法避免了对DOM标准事件和非标准事件混淆不清的情况，而且可以确保无论在哪个版本的jQuery中都能稳定工作。解绑事件是一个重要的概念，因为如果不正确地解绑事件，可能会导致内存泄漏，因为旧的事件处理器仍会...

    关于Jquery的鼠标悬停事件

    这两个事件与原生JavaScript中的`mouseover`和`mouseout`有所不同，它们不会因为元素内部子元素的鼠标移动而触发。`mouseenter` 在鼠标进入元素边界时触发，而 `mouseleave` 在鼠标离开元素边界时触发。这对于处理...

    jquery中取消和绑定hover事件的实现代码

    在使用jQuery进行网页交互设计时，`hover`事件的使用十分频繁，它通常用于模拟`mouseover`和`mouseout`事件的效果。然而，jQuery中对于`hover`事件的绑定和取消有一定的特殊性，这主要体现在事件处理和取消绑定的...

    jquery多级导航菜单hover事件制作三级导航菜单代码

    总结来说，通过jQuery的hover事件和CSS样式，我们可以创建一个响应式且具有延迟关闭效果的三级导航菜单。这种菜单设计既提高了用户体验，也使得网站的导航结构更加清晰。在实际项目中，还可以根据需要进一步优化和...

Magicbox
Global site tag (gtag.js) - Google Analytics