javascript - have event listener effect multiple items in a stack

问题描述:

I am trying to figure out how to have an event listner change the class for multiple items that are stacked on top of each other.

I have a current fiddle here that I am working on, basically when someone clicks the button and hovers an object it changes the class of the object that is hovered. I would like to take this a step further so that when two object are positioned on top of eachother that both objects will be effected. Is there an easy way to do this?

Currently when you click and hover it only effects the top-most element. I would like to effect both the top and bottom element. Any help would be greatly appreciated!

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";
}
}

网友答案:

Assuming I understood your question correct, you can do that with jQuery parent() and children(). See my fiddle: http://jsfiddle.net/yu404vf2/2/

Your function basically becomes like:

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

This works if objects are stacked like:

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

But not if objects are stacked due to z-index/ position absolute.

If you need the objects below the mouse pointer there is a nice function in javascrtipt called elementFromPoint which you can use like:

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

Updated jsfiddle: http://jsfiddle.net/yu404vf2/5/

Hope that helps.

网友答案:

There are many ways of doing this, but assuming you don't want to use a library. I have updated your jsfiddle, but added the comments here.

//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/

You can determine the "depth" of the affected elements, by playing around with the for loop.

分享给朋友：

您可能感兴趣的文章：

随机阅读：

栏目列表

推荐内容

热点内容

动力学知识库

javascript - have event listener effect multiple items in a stack