JS for mouseover图片上传按钮（如Facebook） [英] JS for mouseover image upload button (like Facebook)

问题描述

我正尝试构建一个像Facebook一样的图片上传系统，当你将鼠标悬停在图片上时，一个按钮（一个div，而不是一个真正的html按钮）会出现在选择图片的位置。到目前为止，我正在使用jQuery的悬停方法。问题是，当我将鼠标悬停在图像上时，出现按钮，但是当我将鼠标悬停在按钮上时，该函数假定我不再悬停在图像上，并且按钮消失。当然，由于按钮消失了，我再次将鼠标悬停在图像上，并且该按钮重新出现。当我将鼠标移动到图像上时，最终的结果就是这种闪烁效果。

我似乎无法找出解决方法。我试图为按钮本身创建一个单独的悬停事件，它删除图像的悬停事件，然后在鼠标移出时替换它，但图像鼠标事件似乎首先被触发，并且它什么都不做。

我唯一能想到的就是使用setTimeout，但这看起来很sl。。看到Facebook正在做类似的事情，我确信有一种超级干净的方式来处理它。

有什么想法？感谢！ 尝试使用 mouseenter（）而不是hover（）来处理冒泡

mouseenter事件与mouseover的不同之处在于它处理
事件冒泡。如果在此示例中使用了mouseover，那么当
鼠标指针移到Inner元素上时，处理程序将触发
。这通常是不受欢迎的行为。另一方面，mouseenter事件
只在鼠标进入绑定的
元素时触发其处理程序，而不是后代。所以在这个例子中，当鼠标进入Outer元素时触发
处理程序，但不是
Inner元素。

I'm trying to build an image upload system like Facebook's where when you mouseover an image, a button (a div, not an actual html button) appears to select an image. So far, I'm using jQuery's hover method. The problem is, when I hover over the image, the button appears, but then when I hover over the button, the function assumes I'm no longer hovering over the image, and the button disappears. Of course then since the button is gone, I'm hovering over the image again and the button reappears. The end result is this sort of flickering effect when I move my mouse on the image.

I can't seem to figure out a way around it. I tried creating a separate hover event for the button itself that removes the hover event for the image and then replaces it on mouseout, but the image mouseout event seems to fire first, and it does nothing.

Only thing I can think is to use a setTimeout, but this seems sloppy. Seeing as Facebook is doing something similar, I'm sure there's a super clean way to handle it.

Any thoughts? Thanks!

解决方案

Try using mouseenter() instead of hover() to handle bubbling

The mouseenter event differs from mouseover in the way it handles event bubbling. If mouseover were used in this example, then when the mouse pointer moved over the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseenter event, on the other hand, only triggers its handler when the mouse enters the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse enters the Outer element, but not the Inner element.

这篇关于JS for mouseover图片上传按钮（如Facebook）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！