标签: mouseout

jQuery的mouseout()和mouseleave()有什么区别？

我有班级的班级forum.我的jquery代码:

<script type="text/javascript">
    $(document).ready(function() {
        $('.forum').bind("mouseover", function(){
            var color  = $(this).css("background-color");

            $(this).css("background", "#380606");

            $(this).bind("mouseout", function(){
                $(this).css("background", color);
            })    
        })    
    })
</script>

它非常有效,但是没有它可以更有效地完成它var color = $(this).css("background-color");.刚mouseout离开之前的背景颜色并删除#380606？谢谢.

我想在一个敲除的观察点上执行一个事件input.当控件失去焦点时,即使没有输入任何内容,也应执行此功能.我尝试更改事件绑定但是当用户离开控件而不键入任何内容时它不会触发.我尝试过mouseout事件,但只有当用户在失去焦点后点击表单中的其他地方时才会触发 - 这不是我想要的.即使使用制表符,我也希望一旦焦点从控件移开,偶数就会闪光.

以下是我用于mouseout事件的代码:

<input
    type="text"
    id="txtFirstName"
    tabindex="1"
    maxlength="25"
    class="txtbox" 
    style="width: 200px;"
    data-bind="value: FirstName, 
               attr: {title: FirstNameErrorMessage },
               css: {validationFailed: !IsValidFirstName() },
               event: {mouseout: ValidateFirstName}" 
/>

this.ValidateFirstName = function () {
    self.IsValidFirstName(true);
    self.FirstNameErrorMessage('');
    if (self.FirstName() == '') {
        self.IsValidFirstName(false);
        self.FirstNameErrorMessage('First Name is required');
    }
}

有人可以帮忙吗？

如何获取鼠标悬停时当前元素的类名？例如

当鼠标从div到a时,我想获得div元素的类名.我如何使用jQuery获取它？

我想在 3D 转换的画布上绘图，但 Chrome 中的 mouseout 事件遇到一些奇怪的问题。

当我将 JSFiddle 窗口大小设置为 2100px 时，mouseout 事件会正常工作。

但是，当我将窗口大小设置为 1900px 时，鼠标事件大约在红线处触发。

这真的很奇怪，因为 JSFiddle 窗口大小决定了鼠标移出事件是否被正确触发。

到目前为止，鼠标移出事件在 Firefox 和 Edge 中可以正确触发，但在 Chrome 中无法正常工作！此外，我们在使用滚动位置（例如，通过添加一些<br>' 并滚动影响鼠标移出事件位置）、窗口大小（参见上图）或画布宽度（例如，设置画布）时看到了一些奇怪的行为width 为 200 可以正确触发鼠标移出事件）。

有谁可以帮助我解决这个错误，以便浏览器正确地触发 mouseout 事件，而与窗口大小或滚动位置无关？

代码：JSFiddle

演示：YouTube

小提琴中的代码片段：

$(".dynamic-drawing-canvas").on("mouseout", function(e) {
  console.log(e.clientX, e.clientY)
})

#container {
  pointer-events: none;
  margin-left: 400px;
}

.dynamic-drawing-canvas {
  pointer-events: auto;
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <canvas class="dynamic-drawing-canvas" width="1200" height="300" style="
    transform: matrix3d(1.0303, 0.00317459, 0, 2.13211e-05, -0.68458, -0.165542, 0, -0.00111181, 0, 0, …

我的HTML

<div id="parent">
<div id="child">cx</div>
</div>

当我使用jquery

 $('#parent').mouseout(function(){
//something here
});

我想知道为什么当我的鼠标进入子div时,函数会触发.我还在父母div里面.我希望只有当我离开父div而不是当我在任何子div上时才会触发mouseout函数

http://jsbin.com/esiju/ <<示例

干杯

在我正在使用的库中,我的任务是将元素移动到dom的前面.(我把它做得更大所以我需要看到它,然后当鼠标移出时缩回它).

我正在使用的库有一个简洁的解决方案,它使用活动元素上的appendChildren将它移动到它的父节点的末端,从而进一步朝着dom的末尾移动,然后在顶部.

问题是我相信,因为您正在移动的元素是您在鼠标移动事件上移动的元素丢失.您的鼠标仍在节点上,但未触发mouseout事件.

我已经删除了功能以确认问题.它在Firefox中运行良好,但在任何版本的IE中都没有.我在这里使用jquery来提高速度.解决方案可以是简单的旧javascript ..这将是一个偏好,因为它可能需要回到上游.

我不能在这里使用z-index,因为元素是vml,库是Raphael,我正在使用toFront调用.使用ul/li的示例在一个简单示例中显示问题

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="js/jquery.min.js" type="text/javascript"></script>
<style>
    li
    {
        border:1px solid black;
    }
</style>
</head>
<body>
<ul><li>Test 1</li></ul>
<ul><li>Test 2</li></ul>
<ul><li>Test 3</li></ul>
<ul><li>Test 4</li></ul>
<script>
$(function(){
    $("li").mouseover(function(){
        $(this).css("border-color","red");
        this.parentNode.appendChild(this);
    });

    $("li").mouseout(function(){
        $(this).css("border-color","black");
    });
});
</script>
</body>
</html>

编辑:这是一个js粘贴bin的链接,以查看它的实际效果.http://jsbin.com/obesa4

**编辑2:**在发布更多信息之前,请查看所有答案的所有评论.

我想在鼠标离开浏览器窗口时运行一些Javascript代码.我只需要支持Safari(WebKit.)

我尝试在窗口上放置一个mouseout处理程序.当鼠标离开浏览器窗口时,可以可靠地调用该处理程序.但是由于冒泡,当鼠标在文档中的元素之间移动时也会调用它.我无法弄清楚如何确定鼠标何时实际离开窗口以及何时仅在元素之间移动.

当鼠标离开窗口时,只生成一个事件,并且目标元素看起来是鼠标实际上的元素.因此,检查目标元素是窗口还是文档是不起作用的.并且将整个页面包装在一个不可见的包含div中也不起作用:如果div是不可见的,那么鼠标永远不会超过它,所以没有任何变化.

(如果我把处理程序放在document或document.body上会发生同样的事情,除了令人惊讶的document.body在鼠标进入或离开窗口的空白部分时没有鼠标悬停/鼠标输出事件,例如创建空的垂直空间通过绝对定位底部元素:0.对于该空间,文档和窗口将获得mouseover/mouseout事件,目标为<html>,但document.body不会.)

我有一些想法:

• 在每个mouseout事件中,获取鼠标的实际位置,看看它是否实际上在窗口上.但我不知道这是否真的可行,听起来消除所有竞争条件会很棘手.
• 同时注册一个鼠标悬停处理程序,并检测鼠标悬停未进行鼠标移除(或紧接着a)鼠标悬停的情况.但这需要一个计时器.

我们使用prototype.js,所以理想情况下我想用原型的Event.observe来表达解决方案,但我可以想出那部分.

谢谢你的任何建议!

我有这个小问题,我正在请求你的帮助.我有一个div元素,在其中我有一个img元素,就像这样

<div id="parent" onmouseover="MyFuncHover()" onmouseout="MyFuncOut()">
    <img id="child" src="button.png" style="visibility: hidden" />
</div>

<script type="text/javascript">
    function MyFuncHover() {
        // Here I have some code that makes the "child" visible
    }

    function MyFuncOut() {
        // Here I have some code that makes the "child" invisible again
    }
</script>

正如你所见,图像是div的孩子.我希望只有当我离开div时,孩子才会消失.然而,它看起来像当我将鼠标移动到图像时,MyFuncOut()函数被调用(因为,我想,我将鼠标悬停在图片离开DIV).我不希望这种情况发生.我想只在离开div区域时调用MyFuncOut()函数.

我不知道当你将鼠标移到子控件上时,它的父母会调用mouseout事件(即使我在孩子身上,我仍然在父母身上).我被困在这里,我需要你的一些好建议.谢谢!

变化

OK当我"抓出"孩子时,事件冒泡不会向父母发送"mouseout"事件.当我"鼠标悬停"孩子时,它也不会向父母发送"鼠标悬停"事件.那不是我需要的.当我"鼠标悬停"孩子时,我需要父母的"mouseout"事件不被发送.得到它？当我不希望将子项上的单击事件传播到父项时,事件冒泡很有用,但这不是我的情况.奇怪的是,当我"鼠标悬停"它们时,我在同一个父级中有其他元素不会触发父级的"mouseout"事件.

我在IE浏览器上使用Raphael进行SVG效果时遇到了一个问题.当鼠标悬停在对象上时,动画按预期发生.但是,在mouseout上,永远不会调用mouseout动作,因此对象会陷入鼠标悬停状态.

我见过其他人过去抱怨这个问题,但我看到的唯一解决办法是强制每个对象上的mouseover事件返回所有内容!=当前对象恢复正常状态.我宁愿不做一般的"重置一切",因为我有很多对象,所以我想知道是否有人有他们可以建议的替代方案.我正在考虑将最后一个触发鼠标悬停的最后一个对象存储在变量中,并且只在每次鼠标悬停时重置它,这可能会起作用....