Dispatching a mouse event to an element that is visually behind the receiving element

Question

On my webpage, I have two divs, A and B:

The DOM is as follows (simplified). The main thing to note here is that divs are at the same level in the DOM hierarchy, and they are not ordered. In addition, the outer div not only contains A and B, but also more divs C, D, E, etc. B may not necessarily overlap A. It may also be C lying behind A.

<div>
    <div style="...">B</div>
    <div style="...">A</div>
</div>

The click handler is bound to an external div, capturing mouse click events on A or B in the bubbling phase. Clicking on the intersection of A and B will trigger a click event on A, which bubbles up to my click handler, which is now running.

Now the problem is: under certain conditions, the handler decides that the event should not be processed by A, but must belong to B. If the event should be processed by B, the same click handler will be fired, but the event objects currentTargetwill be B instead of A.

How can i achieve this?

I already looked at css3-pointer-pointer and some event dispatch methods in JS, but couldn't find a solution here.

Possible solution 1 (not compatible with cross browser)? :

I think it is possible to use the css3 event pointer property . If the handler decides that the event should be handled by B, it sets event pointers to none. Then it restarts the mouse click. Question: Is it possible to restart the mouse click only with coordinates without specifying a specific element?

- : http://caniuse.com/pointer-events

Answer 1

B ( jQuery):

()

var $A = $('#A'), $B = $('#B');

$B.on('click', function () {
  console.log('B clicked');   
});

$('#outer').on('click', function (evt) {
    if (Math.random() < 0.1) { // << pseudo condition
        $B.trigger(evt);
    }
});​

http://jsfiddle.net/hzErh/

---

:

// this function should (did not enough testing) return all elements at a given
// point in the order of top to bottom.
var elementsFromPoint = function (x, y, root) {
  var buffer = [], result = [], el, i = 0, lim;

  while ((el = document.elementFromPoint(x, y)) && [root, document.body, document.body.parentNode].indexOf(el) < 0) {
    result.push(el);
    buffer.push({el: el, visibility: el.style.visibility});
    el.style.visibility = 'hidden';
  }

  for (lim = buffer.length; i < lim; i += 1) {
    buffer[i].el.style.visibility = buffer[i].visibility;
  }

  return result;
};

x/y. .

$('#outer').on('click', function (evt) {
  var elements = elementsFromPoint(
    evt.pageX + $(this).offset().left,
    evt.pageY + $(this).offset().top,
    this
  );

  console.log(elements);
});

demo: http://jsfiddle.net/hzErh/1/

---

2: :

// this function should (did not enough testing) return all elements at a given
// point, though the order is not representative for the visible order.
var elementsFromPoint = function (root, x, y) {
  var result = [], i = 0, lim = root.childNodes.length, bb;

  for (; i < lim; i += 1) {
    bb = root.childNodes[i].getBoundingClientRect();
    if (bb.left <= x && x <= bb.right && bb.top <= y && y <= bb.bottom) {
      result.push(root.childNodes[i]);
    }
  }

  return result;
};

demo: http://jsfiddle.net/CTdZp/2/