标签: mouseenter

有没有相当于mouseenter的触摸.

我想检测用户是否在我的DIV上滑动.

我更喜欢直接取决于目标元素的解决方案而不是父元素上的重新计算位置等.

网站:http://dizzyn.github.io/piano-game/ - 使用鼠标工作正常(鼠标向下和滑动;不使用触摸幻灯片)

谢谢

我正在创建一个站点,您将鼠标悬停在图像上,它显示一个元素(在这种情况下,通过将其高度从0扩展到154px).

jQuery(document).ready(function(){
    jQuery("#dropdown-menu-create .dropimage").mouseover(function(){
        jQuery("#dropdown-menu-create .toggle").animate({height:"154px"},200);
    });
    jQuery("#dropdown-menu-create .dropimage").mouseout(function(){
        jQuery("#dropdown-menu-create .toggle").animate({height:"0"},200);
    });
});

当鼠标离开时内容会扩展,当鼠标离开时内容会折叠,但每次鼠标在元素内移动时,内容会反复展开并折叠,直到鼠标离开元素.

我之前从未遇到过这个问题,过去我曾经使用过这些功能,所以我不知道发生了什么.有任何想法吗？

编辑:

jQuery(document).ready(function(){
    jQuery("#dropdown-menu-create .dropimage").mouseenter(function(){
        jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"154px"},200);
    });
    jQuery("#dropdown-menu-create .dropimage").mouseleave(function(){
        jQuery("#dropdown-menu-create .toggle").stop(true,true).animate({height:"0"},200);
    });
});

我现在使用上面的代码,仍然得到完全相同的问题.我已经尝试过.stop函数的所有变体(false,false)(false,true)(true,false)(true,true).每个问题都会出现不同的问题,但仍然会发生.

终极编辑:

问题是,一旦调用该函数,鼠标所覆盖的内容就会被不同的内容覆盖.因此,在任何给定点,鼠标同时进入和离开图像.通过将函数调用移动到另一个元素来解决问题.

我想通过首先使它的边框在mouseenter上使其厚度增加5px,然后在mousele上减少5px的边框来设置div的动画效果,但棘手的部分是我不希望div看起来像是在移动(如果你只是动画边界,整个div看起来会变化,而不仅仅是越来越厚的边界.我非常接近,但我最后一部分就停留在了:mouseleave.到目前为止我所拥有的是:

$("#thumbdiv<%=s.id.to_s%>").bind({
            mouseenter: function(){
                $(this).animate({
                    borderRightWidth: "25px",
                    borderTopWidth: "25px",
                    borderLeftWidth: "25px",
                    borderBottomWidth: "25px",

                    margin: "-5px"
                }, 500);
            },
            mouseleave: function(){

                $(this).animate({
                    borderRightWidth: "20px",
                    borderTopWidth: "20px",
                    borderLeftWidth: "20px",
                    borderBottomWidth: "20px",

                    margin: "0px"
                }, 500);
            }
        });

在此之前我将边框设置为20px,边距未设置,因此它是0px.div在mouseenter上动画很好,我可以让边框更粗而没有div实际移动到位,但是当mouseleave被触发时,div将首先将自身重新定位到该位置,就像从未调用"margin -5px"一样,然后缓慢地减少它的边界,似乎"magin:'0px'"实际上并没有被调用.

我不确定我的描述是否有意义,如果需要我可以提出原型.

我有这个JQuery代码的问题:

$(".item").mouseenter(function(){
    $(this).addClass("active");
    $(this).removeClass("item");
    $(".item").hide(700);
}).mouseleave(function(){
    $(this).stop();
    $(this).addClass("item");
    $(this).removeClass("active");
    $(".item").show(700);
});

这是我的HTML:

<ul>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
    <li class="item">Item</li>
</ul>

我想当我悬停在一个项目上,其他项目隐藏,代码工作正常但问题就在那里,如果我在隐藏的持续时间(700毫秒)中悬停另一个项目,它将创建一个隐藏/显示项目的循环.我该怎么做才能防止这种情况发生.

的jsfiddle

注意:我希望悬停的项目向左移动,而不是保持固定.

我确定我忽略了一些东西,但是在我替换触发了mouseenter的锚标签中的html后,我似乎无法触发"mouseleave"事件.

在这里添加代码但是如果你访问下面的JSFiddle链接并将鼠标悬停在星形图标上,它实际上要简单得多.

$(document).ready(function () {
    $(document).on('mouseenter', '[id^=star-]', function () {

        $('[id^=star-]').html('<span class="star star-empty"></span>');

    }).on('mouseleave', '[id^=star-]', function () {

       $('[id^=star-]').html('<span class="star star-full"></span>');

   });
});

请在这里查看JSFiddle.只需将鼠标悬停在星形图标上即可看到我的意思.

我opacity = 1在开头有一张图片.

当鼠标进入图像时,请更改opacity = 0.5.当鼠标离开图像时,请更改不透明度.

这是一个代码:

mouseEnter() {
    console.log('mouse enter')
    const classname = '.' + this.props.post.code
    document.querySelector(classname).classList.add('image-hover-opacity')
}

mouseLeave() {
    console.log('mouse leave')
    const classname = '.' + this.props.post.code
    document.querySelector(classname).classList.remove('image-hover-opacity')
}

    render() {
        <img src={src} onMouseEnter={::this.mouseEnter} onMouseLeave={::this.mouseLeave} />
    }

onMouseEnter和onMouseLeave分别在鼠标进入和离开图像时被触发.但问题是当我在图像中移动鼠标时,onMouseEnter和onMouseLeave都会被触发.

我也尝试过css解决方案,当我将鼠标悬停在图像上时,更改不透明度属性.但问题是一样的:当我在图像中移动鼠标时,:悬停而不是悬停被多次触发.

怎么解决这个？谢谢

更新 我以前的代码中有一些东西.创建了一个jsfiddle,它的工作原理.对不起大家

我正在玩AngularJS框架,我偶然发现了一个问题.我做了一个名为'enter'的指令.它触发mouseenter和的功能mouseleave.我将它作为属性应用于表行元素.它现在为每个子元素(所有列等)触发,但只有当您将鼠标放在表行上时才应触发它.

这是我的指令的样子:

myapp.directive('enter', function(){
    return {
        restrict: 'A', // link to attribute... default is A
        link: function (scope, element){
            element.bind('mouseenter',function() {
                console.log('MOUSE ENTER: ' + scope.movie.title);
            });
            element.bind('mouseleave',function() {
                console.log('LEAVE');
            });
        }
    }
});

这是一个例子:http: //jsfiddle.net/dJGfd/1/

您必须打开Javascript控制台才能看到日志消息.

在AngularJS中实现我想要的功能的最佳方法是什么？如果有合理的AngularJS解决方案,我更喜欢不使用jQuery.

我有一个SVG,其中有更多SVG,其中包含可变数量的rect元素,所有这些都是从数据对象生成的.这是一般的层次结构:

<svg class="parent-svg">
    <svg class="child-svg">
        <rect />
        <rect />
    </svg>
    <svg class="child-svg">
        <rect />
        <rect />
    </svg>
</svg>

我已经将mouseenter/mouseleave事件绑定到.child-svg元素上,但是当我的鼠标转到<rect>元素之间的空白时,我发现事件正在触发.我对mouseenter/mouseleave的理解是,当光标进入/离开子元素时,它们不应该触发 - 这看起来像是鼠标悬停/鼠标移动所期望的行为.当然,我理想的是,当我离开每个部分(我已经使用颜色描绘)时,mouseenter/mouseleave事件才会触发.

这是相关的小提琴:http://jsfiddle.net/ysim/yVfuK/4/

编辑:我尝试给.child-svg元素一个高度和宽度,但这似乎也不起作用:http://jsfiddle.net/ysim/gMXuU/3

编辑:这是解决方案的小提琴,根据@ pornel的建议修正:http://jsfiddle.net/ysim/HUHAQ/

谢谢!

似乎mouseenter/mouseleave方法不仅在鼠标的坐标进入目标的客户端矩形时触发,而且在另一个元素发现或覆盖目标时触发.这是一个问题,因为在我的mouseenter回调中,我想在目标顶部显示另一个元素E. 我也希望E在mouseleave上消失.您可以将此视为重叠的工具提示.

但是,当我将鼠标移动到目标上时,会触发mouseenter,元素E将覆盖它.此覆盖范围进一步触发了mouseleave事件,因此E将消失.这进一步触发了mouseenter事件,因此E将再次出现.....这是一个非常令人头痛的问题.

所以基本上,我想知道是否有一个版本的mouseenter/mouseleave只关心鼠标是否进入或离开目标的客户端矩形,无论目标是否被覆盖.

更新:@arunopjohny创建了一个JS小提琴来说明这个问题.看评论

如何为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 中使用它。