Question

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

考虑到这个简单的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。

是否有解决方法，或者是否需要将所有内部对象绑定到事件处理程序？

我有一段与内部事件处理程序正常工作的代码，只是希望复制代码行为，如果可能的话，只需一个事件处理程序。

我认为这是更大的应用程序将如何工作，我的意思是没有所有这些事件处理程序会简化一些事情，似乎？

非常感谢。

Answer 1

然后在父母那里使用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(); 

});

Answer 2

你可以使用jQuery的新$.on方法来实现这一点，一个事件绑定到父像这样

$('.navRow').on('mouseover','.navbox',function(){
   // now source object is this
   $source = $(this);
});

Answer 3

如果您正在查找单击了哪个.navbox，那么您应该

$('.navbox').each(function(){

Answer 4

使用event delegation的另一种方法可能是：

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

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

以下是显示此方法和.on委派方法

的jsfiddle

事件处理101 - 如何从嵌入式<div> </div> </div>中的外部<div>捕获事件

4 个答案: