имеют эффект прослушивателя событий. Несколько элементов в стеке

Question

Я пытаюсь выяснить, как изменить список событий для нескольких элементов, которые сложены друг на друга.

У меня здесь настоящая скрипка, над которой я работаю, в основном, когда кто-то нажимает кнопку и наводит объект, он меняет класс объекта, который зависает. Я хотел бы сделать это еще дальше, так что, когда два объекта расположены сверху друг друга, оба объекта будут выполнены. Есть простой способ сделать это?

В настоящее время, когда вы нажимаете и наводите его, он воздействует только на самый верхний элемент. Я хотел бы использовать как верхний, так и нижний элемент. Любая помощь будет принята с благодарностью!

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(). Смотрите мою скрипку: 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/

Надежда, что помогает.

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/

Вы можете определить «глубину» пораженных элементов, играя вокруг с для цикла.