javascript - 让事件监听器影响堆栈中的多个项目

Question

我试图弄清楚如何让事件列表器更改彼此堆叠的多个项目的类。

我现在正在处理一个 fiddle ，基本上当有人单击按钮并将鼠标悬停在一个对象上时，它会更改悬停对象的类。我想更进一步，以便当两个对象放置在彼此之上时，两个对象都会受到影响。有没有简单的方法可以做到这一点？

目前，当您单击并悬停时，它只会影响最顶部的元素。我想同时影响顶部和底部元素。任何帮助将不胜感激!

http://jsfiddle.net/Ltdgx363/1/

obj=document.getElementsByTagName("object");
var mouseDown = 0;
document.onmousedown = function() { 
++mouseDown;
}
document.onmouseup = function() {
  --mouseDown;
}
for(i = 0; i < obj.length; i++) {
obj[i].addEventListener("mouseover", colorred ,false);
}
function colorred(){
if(mouseDown>0){
    this.className = "red";
    }
}

Answer 1

假设我正确理解你的问题，你可以使用 jQuery parent() 和 children() 来做到这一点。看我的 fiddle :http://jsfiddle.net/yu404vf2/2/

你的函数基本上变成这样:

function colorred(){
    if(mouseDown>0){
        this.className = "red";
    }
    $(this).parents().class = "red";
}

如果对象像这样堆叠:

<object id="object3">Test3
 <object id="object4">Test4</object>
</object>

但如果对象由于 z-index/绝对位置而堆叠，则不会。

如果您需要鼠标指针下方的对象，javascrtipt 中有一个名为 elementFromPoint 的好函数，您可以使用它，例如:

var x = event.clientX, y = event.clientY,
elementMouseIsOver = document.elementFromPoint(x, y);
elementMouseIsOver.class="red";

更新了jsfiddle:http://jsfiddle.net/yu404vf2/5/

希望有帮助。