Отправка события мыши элементу, который визуально находится «позади» принимающего элемента

На моей веб-странице есть два элемента div, A и B:

DOM выглядит следующим образом (упрощенно). Здесь важно отметить, что элементы div находятся на одном уровне в иерархии DOM и ничем не упорядочены. Кроме того, внешний div содержит не только A и B, но и другие div C, D, E и т. д. B не обязательно может быть перекрыт A. Это также может быть C, лежащий за A.

    
B
    
A

К внешнему элементу div прикреплен обработчик кликов, перехватывающий события щелчков мышью на A или B в фазе всплытия. Щелчок на пересечении A и B вызовет событие click на A, которое всплывает до моего обработчика кликов, который сейчас запущен.

Теперь проблема: при определенных условиях обработчик решает, что событие не должно обрабатываться A, а должно принадлежать B. Если событие должно обрабатываться B, будет запущен тот же обработчик щелчка, но объекты события свойство currentTargetбудет B вместо A.

Как этого добиться?

Я уже рассмотрел обработчик указателей css3 и некоторые методы диспетчеризации событий в JS, но не смог найти здесь решения.

Возможное решение 1 (не кроссбраузерное) ?:

Я думаю, что можно использовать свойство pointer-events css3. Если обработчик решает, что событие должно быть обработано B, он устанавливает для событий указателя значение none. Затем он повторно запускает щелчок мыши. Вопрос здесь: Можно ли перезапустить щелчок мышью только с координатами, не указывая конкретный элемент?

В любом случае, поддержка событий-указателей ограничена: http://caniuse.com/pointer-events