0

我希望有一种方法可以使用一个事件处理程序来做到这一点。请允许我解释一下：

考虑到这个简单的 html 片段，它复制了我正在处理的东西的想法：

<div class="navRow">
     <!-- 5 child divs in here -->
    <div id="box-bambin" class="yellow-box navbox">
    Content 1
    </div>

    <div id="box-mamiepom" class="green-box navbox">
    Content 2
    </div>

    <div id="box-amusailes" class="orange-box navbox">
    Content 3
    </div>

    <div id="box-fracomousse" class="red-box navbox">
    Content 4
    </div>

    <div id="box-pommeEnchantee" class="blue-box navbox">
        Content 5
    </div>

</div>

我已经为所有内部 div 分配了事件处理程序，但我很确定可以在外部 div 上设置一个事件处理程序并捕获内部 div 上的事件。当我在外部 div .navRow 上设置事件处理程序时，我的鼠标会捕获外部 div 事件。

  $('.navRow', context).mouseover(function (event, domEle) {      

     var targetBox =  $(event); 

     console.log("captured event target = " + event.currentTarget);

        $('.navRow').each(function(){
            if($(this).attr('id') == $(event.target).attr('id')){
               // Found match do nothing.
              console.log("matched = " + $(this).attr('id'));
            } else{
              console.log("this = " + $(this).attr('class'));
              //* change for image.
            }
        });

  });

在这一点上，我只是想获得鼠标悬停的内部 div。拜托，我非常需要任何关于我正在做的不良用法的批评/提示。我尝试过的任何东西都没有给我鼠标悬停的内部元素#id。

我尝试了 .target 和 currentTarget 属性，但它们没有给出正确的内部 div 对象 ID。

有没有办法解决这个问题，或者所有内部对象都需要绑定到事件处理程序？

  • 我有一段类似的代码可以与内部事件处理程序一起正常工作，只是想复制代码行为，如果可能的话，使用一个事件处理程序。

我在想这就是更大的应用程序的工作方式，我的意思是没有所有这些事件处理程序会在某种程度上简化事情，似乎？

谢谢。

4

4 回答 4

4

然后on()在父级上使用（jQuery 1.7+）作为“单手”，并siblings()获取其他不是目标的。

//"attach to .navRow an onmouseover for .navbox"
$('.navRow').on('mouseover','.navbox',function () {      

     //the target. "this" is the DOM element .navbox
     //to use jQuery on it, we wrap it in $();
     var target = $(this);

     //the siblings that are not the targets
     //since "target" is already a jQuery object
     //we can use siblings() on it to get its siblings
     var nonTargets = target.siblings(); 

});
于 2012-05-11T05:08:36.917 回答
2

您可以使用 jQuery 的新$.on方法通过一个事件绑定到父对象来完成此操作，如下所示

$('.navRow').on('mouseover','.navbox',function(){
   // now source object is this
   $source = $(this);
});
于 2012-05-11T05:08:03.280 回答
1

如果您正在寻找点击了哪个 .navbox，那么您应该有

$('.navbox').each(function(){
于 2012-05-11T05:15:45.720 回答
1

使用事件委托的另一种方法可能是：

$('.navRow').mouseover(function (evt, domEle) {      
     evt = evt || event;
     var targetBox =  $(evt.target || evt.srcElement); 
     console.log("You hovered #" + targetBox.attr('id'));
});

这样您仍然可以检索事件启动元素 ( div.navrow)。

这是一个显示此方法和委托方法的jsfiddle.on

于 2012-05-11T05:41:55.627 回答