Question

我正在寻找在HTML中捕获鼠标事件的最佳方法。当你有复合div，文本，图像和其他s时，我所做的就是在所有东西上放一层来抓住鼠标。

这可能会导致进一步的问题，因为这一层可以避免你捕捉到你作文的其他部分，因此你有义务扩展这种方法。

当你不得不使用Sprite.graphics做同样的事情时，我显然受到了我作为flash程序员的过去的影响。

我通常喜欢这样：

<div class="photo-element">
   <div class="photo-element-image"><img src="..."/></div>
   <div class="photo-element-title">Some Title</div>
   <div class="photo-element-mouse-wrapper"></div>
</div>

这样的样式：

.photo-element-mouse-wrapper
{
    width:70px;
    height:70px;    
}

.photo-element-title
{
    position:absolute;
    top: 5px;
    ...
}

.photo-element-image
{
    position:absolute;
    top: 0px;
    ...
}

.photo-element
{
    width:70px;
    height:70px;
    position:relative;
}

最后jQuery将是：

$('.photo-element-mouse-wrapper').mouseover(function() {
    //code
});

我的问题是：

这是捕捉鼠标事件的最佳方法吗？

Answer 1

如果要在所有子元素上捕获事件，则在父元素上附加事件处理程序，因为事件在JavaScript中冒充DOM树。

试试这个。

$('.photo-element').mouseover(function(){
    //Code
});

Answer 2

我就是这样做的 - 尽管我会将它包装在$（document）.ready（）中以确保首先加载DOM。我还会将其设置为捕获整个DOM元素上的事件，例如带有类照片元素的div。代码示例：

$(document).ready(function() {
      $('.photo-element').mouseover(function() {
           //code
      });
});

Answer 3

这可以，但你应该去jquery的网站。以下是“photo-element-mouse-wrapper”的两个例子。

用于悬停事件（mouseenter和mouseleave）

$('.photo-element-mouse-wrapper').hover(function(e){
    //write code for to take action when mouse enters the element
},
function(e){
    //write code for to take action when mouse leaves the element
});

对于点击事件

$('.photo-element-mouse-wrapper').click(function(e){
    e.stopPropagation(); // prevents event bubling
    //write code for to take action when mouse clicks the element
})

还有其他可用的鼠标事件，例如mouseover，mousedown e.t.c.您可以在jquery's site找到更多示例，这是学习jquery的更好地方。

Answer 4

mouseover和mouseout事件会冒泡，所以如果鼠标离开div，则会在div上触发mouseout事件并将其所有父项触发到正文，除非这propagation is stopped。

您是否了解mouseenter，mouseleave和hover？它们都在进入/退出元素时触发，但它们不会起泡。因此，如果您退出div，则只会触发一个mouseleave，仅在该div

上

最佳实践通过复合<div> s </div>在jQuery中捕获鼠标事件

4 个答案: