Как передать события клика от одного div к другому?

Question

Мне нужно найти способ передать события клика из div вверху в div ниже него (и игнорировать клики в более высоком div). Существует известный способ имитации события click и передачи его другому div, но это не естественное поведение, а наименее требуемый вариант.

Похоже, что всплытие событий здесь не поможет, так как div в верхней части не содержится в приведенном ниже.

Есть идеи?

вот пример jsfiddle:

http://jsfiddle.net/QKjUx/

Если вы удалите «оверлейный» div, вы можете нажать на любой из элементов. Пока он там, ты не можешь. Можно передать событие в div ниже, однако, позиция важна - может быть ссылка, по которой я хочу, чтобы пользователь мог щелкнуть по ней.

Answer 1

добавить это свойство css к оверлею div:

   pointer-events: none;

Подробнее об этом можно прочитать по адресу: http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/

Answer 2

Вы можете вызвать событие щелчка на одном div, щелкнув на другом div.

Вы можете создать событие щелчком, например

//A function to fire an event
function eventFire(el, etype){
    if (el.fireEvent) {
      el.fireEvent('on' + etype);
    } else {
      var evObj = document.createEvent('cClick');
      evObj.initEvent(etype, true, false);
      el.dispatchEvent(evObj);
    }
}

var div1 = document.getElementByID("firstDiv"); //find the first div
div1.onClick = function() { //attach a onclick event
   //Now select the element and fire the event
   var div2 = document.getElementById("seconddiv"); //select the second div
   eventFire(div2, 'click'); //fire the click event
};

Answer 3

Вам нужна структура div для визуализации? - Я думаю, вы могли бы настроить свой первый div для отображения inline, а затем поместить другие div внутри него так, чтобы внешний div имел тогда 0 высоту, и тогда вы могли бы щелкнуть по каждому отдельному div внутри него.