StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery .on to apply to all intermediate nodes
text
Body
copied!<p>Given a doucment such as this:</p> <pre><code><body><div class="a"><div class="b"><div class="c"></div></div></div></body> </code></pre> <p>(in the example everything is a div - but they could be anything)</p> <p>I want to run a click event handler for the div which was clicked and all its parent's</p> <p>i.e. if you click on <code>.c</code> I would expect the event to fire for <code>.c</code> then <code>.b</code> then <code>.a</code> If you click on <code>.b</code> then the event should fire for <code>.b</code> then <code>.a</code></p> <p>N.B. in this instance I am using <code>$('body').on('click', function(event){...})</code> using <code>$('div').click(function(event){...})</code> is not a practical option in my instance for reasons not relevant to the question.</p> <p>I tried walking the dom tree from within the event handler which works but the event object contains the wrong offsets.</p> <p>So my question really is - is there a built in way to have the event handler called with the above pattern.</p> <p>Or failing that - is there a built in way to manipulate offsets the event object given a "from" and "to" element. i.e. something like <code>AdjustOffsets(event, $target, $target.parent())</code></p> <p>Or failing that - what logic do I need in order to perform this manipulation by hand.</p> <p>On the last case I have this code but it doesn't work.</p> <pre><code>if ($target.css('position') != 'static' && $target.css('position') != '') { event.clientX += $target.css('left'); event.clientY += $target.css('top'); } event.clientX += $target.css('borderLeftWidth'); event.clientY += $target.css('borderTopWidth'); event.clientX += $target.css('marginLeft'); event.clientY += $target.css('marginTop'); $target = $target.parent(); event.clientX += $target.css('paddingLeft'); event.clientY += $target.css('paddingTop'); </code></pre> <p>This fails because the css properties contain units. The units are easily stripped but I believe some browsers return the original unit here (which could be <code>em</code> or <code>pt</code> for example) whereas the clientX property is required to be pixels - so conversion is necessary.</p> <p>Also it was a best-guess on my part and probably misses a thousand obscure css3 cases - hence my ambitious desire for some kind of built-in method.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload