让事件侦听器影响堆栈中的多个项目

Question

我正在尝试弄清楚如何让事件监听器更改 class 多个堆叠在一起的项目。

我正在处理当前 fiddle，基本上当有人单击按钮并悬停一个对象时，它会更改悬停对象的 class。我想更进一步，这样当两个对象彼此重叠时，两个对象都会受到影响。有没有简单的方法来做到这一点？

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

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/ 绝对位置而堆叠，则不会。

如果您需要鼠标指针下方的对象，javascript 中有一个名为 elementFromPoint 的不错的函数，您可以像这样使用它：

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

已更新 jsfiddle：http://jsfiddle.net/yu404vf2/5/

希望对您有所帮助。

Answer 2

有很多方法可以做到这一点，但前提是您不想使用库。我已经更新了您的 jsfiddle，但在此处添加了评论。

//find all objects, and create an empty array, to contain the object id's later on.
var r_objects = document.getElementsByTagName('object');
var r_ids = [];

/*
your colorred function, 
not using your general mousedown tracker, 
but added the mousedown eventListener to your objects.
*/

var colorred = function(obj,addClass){
     /* 
     find the index of your currently clicked element, 
     to determine if there are any "underneath" it, objects 
     that are rendered earlier, get a lower index. 
     */
     oIndex = r_ids.indexOf(obj.id); 

     /* 
     loop through the indexes lower and the same as the element 
     your mouse is on. you can determine the depth here, by not looping
     through, but by simply subtracting or adding to the oIndex var, and 
     using it as a key in your r_objects array. addClass is true or false,
     depending on the event, so it also removes the class after your 
     mouseup event is triggered 
     */

     for(i = 0; i <= oIndex; i++){
        affectedObj = r_objects[i];
        if(addClass){
            affectedObj.className = "red";
        }else{
            affectedObj.className = "";
        }
    };
};

var addListeners = function(){
    for(i = 0; i < r_objects.length; i++){
        obj = r_objects[i];
        obj.addEventListener('mousedown',function(){
            colorred(this,true);
        });
        obj.addEventListener('mouseup',function(){
            colorred(this,false);
        });

        //add the id to the r_ids array 
        r_ids.push(obj.id);
    };
};
addListeners();

http://jsfiddle.net/Ltdgx363/3/

您可以通过使用 for 循环来确定受影响元素的 "depth"。

让事件侦听器影响堆栈中的多个项目

have event listener effect multiple items in a stack

javascript

mouseover

elements

stacked