如何为mouseenter事件实现事件委托？
我正在寻找与此 jQuery 代码等效的代码，但无法理解 jQuery 如何在内部执行此操作：
$(document).on('mouseenter', '.demo', foo);
我已经看到了关于它的另一个问题，但没有提供适当的解决方案。
我还阅读了有关 mouseenter和委托的Mozilla 文档，除了说它与任何浏览器都不兼容之外，他们提供的示例在 JS 控制台上抛出错误并且不起作用。
我还检查了这个 codepen，它也不适用于 Chrome（没有尝试其他浏览器）。
任何的想法？
到目前为止，这就是我正在尝试的，但target元素似乎总是冒泡：
document.addEventListener('mouseenter', function(e) {
console.log('==============================');
console.log(e.currentTarget); //document
console.log(e.target); //document
console.log(e.relatedTarget); //nothing
console.log(e.handleObj); //nothing
});
你可以在这个 jsfiddle 中使用它。
我有菜单列表
<ul class="systeMenus">
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
</ul>
第一个ul标记是从onmouseover另一个框架集框架中的链接的某个其他事件打开.
2 ul将CSS打开display:block;position:absolute; left:175px;到父级li,就像一个菜单出现在父li标记内,并隐藏在onmouseout同一个标记上的事件li.
如何mouseenter在身体上隐藏这些UL .当我试着$('body').mouseenter和parent $('ul.systeMenus').mouseleave.由于我在两个实现上都遇到了问题.
任何帮助表示赞赏.坚持提供解决方案.
我的问题是:我有一个触发器(a)和一个弹出窗口(div).div不嵌套在锚内.
我得到了大部分的结果,但是现在我已经满怀希望了.2.检查a上的mouseleave时,检查div上是否有mouseenter.如果是,我想中止mouseleave.如果没有,我想关闭div.
我究竟做错了什么？这甚至是正确的方法吗？
这是标记:
<a href="#" class="popup_toggle" style='display:block;width:50px;height:50px;border:1px solid red;position:relative;'>Toggle</a>
<div class="popup_div" style='position:absolute;top:50px;left:0px;border:1px solid blue;display:none;'>Popup</div>
这是jQuery:
$('.popup_toggle').mouseenter(function() {
var element = $(this).next('.popup_div');
$.data(this, 'timer', setTimeout(function() {
element.show(100);
}, 500));
});
$('.popup_toggle').mouseleave(function() {
clearTimeout($.data(this, 'timer'));
if($('.popup_div').mouseenter==true)
{
return false;
}
else
{
$('.popup_div').hide(100)
};
});
我们有一个带有 Hwndhost 元素的 Wpf 应用程序，用于通过 DirectX 渲染 3D 内容。我们向客户端公开一个“Panel”接口，其中包含 MouseEnter 和 MouseLeave 事件。对于 Hwndhost“面板”，当我们第一次收到 HwndHost.WndProc 的 WM_MOUSEMOVE 事件时，我们模拟 MouseEnter 事件，因为 win32 没有 WM_MOUSEENTER 事件。另外，对于 HwndHost，我们通过 TrackMouseEvent() 请求 WM_MOUSELEAVE 事件，该事件在我们的“面板”界面上模拟 MouseLeave 事件。
问题是，当用户非常快速地将鼠标移动到 HwndHost 面板或从 HwndHost 面板移出时，我们会先收到鼠标移动到的面板的 Enter 事件，然后再收到鼠标移动的面板的离开事件。 当源面板和目标面板都是 wpf 元素时，不会发生这种情况，仅当涉及 hwndhost 元素时。另外，如果有两个 HwndHost 元素彼此相邻，则会发生相同的行为，因此看起来 win32 没有按照消息发生的顺序发送消息。
有谁知道解决这个问题的方法吗？ 如果有一种方法可以让 Win32 按照事件发生的顺序发送事件，那就太好了。
下面是一个示例应用程序，它演示了向调试器输出窗口打印消息的问题：
// App.xaml.cs
using System;
using System.Windows;
using System.Runtime.InteropServices;
namespace WpfHostingWin32Control
{
public partial class App : Application
{
[DllImport("comctl32.dll", EntryPoint = "InitCommonControls", CharSet = CharSet.Auto)]
public static extern …我试图在winforms应用程序中实现一个图像按钮,因为我可以...使用asp.net时很容易,问题似乎是(我怀疑)当鼠标位于图片框内的图像上时它没有响应或没有触发mouseEnter事件
它看起来如果我有一个小于pictureBox大小的图片它会接受触发事件的原因但是在pictureBox中的图像上它不会？
诀窍是将pictureBox设置为sizeMode = zoom.当鼠标悬停在"imageButton"上时再做两件事:将PictureBox的大小更大一点+将光标更改为手
所以我会用asp.net获得一种鼠标效果
有没有人有这个问题？起初我试过mouseHover,然后我认为输入会做得更好,因为它只需要鼠标通过图片框的边框...进入和悬停事件对我不起作用...
编辑:
事件确实触发,我可以看到,如果我最初将sizemode设置为CenterImage并且在事件内部我要求sizemode = zoom,那么效果剂量会发生..但cursor.current = Cursors.Hand不会改变.
添加mouseenter和mouseleave事件后，点击元素（点击次数不确定）？mouseenter和mouseleave会被触发。
我尝试了 chrome 62.0.3202.94?32??firework?IE，它只发生在 chrome 上。这是 chrome 的错误吗？或者只是我的代码有问题？
在线示例：http : //runjs.cn/code/cbb0aw1a
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h4>click on the parent part,then see the console </h4>
<div class="parent" style="width: 100%;height: 100px;background-color: #ddd">
<div class="children" style="width: 50px;height: 50px;background-color: #d9534f;cursor: pointer">
test
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
$(".parent").mouseenter(function () {
console.log("enter")
}).mouseleave(function () {
console.log("leave")
});
</script>
</html>
我的页面上有一个元素,其中绑定了一个mouseenter事件,它改变了子图像的尺寸.
它就像我想要的那样工作,但是如果你用光标悬停在div所在的页面上,它会在加载时立即触发 - 这是不希望的,我希望它什么都不做,直到鼠标光标真正进入 div而不是而不只是在那里开始.
我试过在jsfiddle上敲一个例子,但页面加载得太快,让我把光标放在正确的位置:(
一种可能性是将绑定方法调用置于超时状态,以便绑定事件需要一秒钟,但如果用户将光标留在我的div上,问题仍然会发生.
有任何想法吗？
使用jQuery 1.6.2
我在这里举例说明情况:http: //jsfiddle.net/nubrF/40/
如果将鼠标放在动画元素的路径上,则可以观察到当目标元素在鼠标指针"下方"传递时,仅在Firefox(而不是IE,Chrome或Safari)中触发事件.
我实际上有两个问题:
这是正常的浏览器行为吗？
你建议用什么方法模拟这些事件,并在目标元素通过鼠标指针时得到注意？
我应该提一下,我已经考虑了鼠标的pageX和pageY以及页面中元素的位置,但这个解决方案看起来很复杂而且不是很干净.
谢谢你的帮助.
我做了一个简单的鼠标输入和鼠标离开动画.当你鼠标输入div.比链接div更开放.当你鼠标移出时,div将关闭.我用slideUp和slideDown设置了一个动画.
我的动画有问题.页面上有很多.comment div.当我快速将鼠标悬停在物品上时.幻灯片动画很疯狂,你很多时候都会看到动画.我该如何解决这个问题？谢谢!
$("#comments .comment .links").hide();
$("#comments .comment").mouseenter(function() {
$(".links",this).slideDown(300);
}).mouseleave(function() {
$(".links",this).slideUp(300);
});
我将 onMouseEnter 事件分配给父元素，但子元素是由该事件触发的事件。当我在控制台上写 e.target 时，它会打印孩子。我怎样才能防止这种行为？
我已经尝试过 e.stopPropagation()，并更新 react。
import React, { Component } from 'react';
export default class Menu extends Component {
menuElement_Click(e) {
// trigger change
}
menuItem_MouseEnter(e) {
console.log(e.target);
}
render() {
return (
<div className='menu-container'>
<div className='menu-item'>
<div className='menu-label' to='/'
onClick={this.menuElement_Click.bind(this)}>
Home
</div>
</div>
<div className='menu-item' onMouseEnter={this.menuItem_MouseEnter.bind(this)}>
<div className='menu-label'>About</div>
<div className='sub-menu'>
<div className='sub-menu-item' to='/about#story'
onClick={this.menuElement_Click.bind(this)}>
Story
</div>
<div className='sub-menu-item' to='/about#more'
onClick={this.menuElement_Click.bind(this)}>
More
</div>
</div>
</div>
</div>
)
}
}
在控制台上打印
<div className='menu-label'>About</div>
但我需要它
<div className='menu-item'>...</div>
mouseenter ×10
jquery ×5
mouseleave ×4
javascript ×3
mouseevent ×2
absolute ×1
animated ×1
c# ×1
click ×1
dom-events ×1
hwndhost ×1
mouse ×1
mousehover ×1
mousemove ×1
popup ×1
position ×1
reactjs ×1
slidedown ×1
slideup ×1
winforms ×1
wpf ×1