[UPHPU] stopping propagation

[Kirk Cerny]

This is what the HTML element label is for, no JavaScript required.

<form>
  <label for="male">Male</label>
  <input type="checkbox" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="checkbox" name="sex" id="female" />
</form>

So sad, I love JavaScript.

Kirk Cerny

On Thu, Dec 31, 2009 at 3:49 PM, Wade Preston Shearer
<wadeshearer.lists at me.com> wrote:
> Here is an abbreviated example of some code:
>
> <ul class="formlist">
> <li><input type="checkbox" />Bananas</li>
> </ul>
>
>
> I want the user to be able to click the checkbox text and anywhere in
> the li that contains the checkbox to be able to check/uncheck the
> checkbox.
>
> This…
>
> $('.formlist li').click(function(e) {
>        $(this).find('input').click();
> });
>
>
> …does that nicely, except that the checkbox no longer works. That is
> because of a propagation issue, which can be resolved with this…
>
> $('.formlist li').click(function(e) {
>        $(this).find('input').click();
> });
>
> $('.formlist input').click(function(e) {
>        e.stopProgagation();
> });
>
>
> …but the two click listeners seems wasteful to me, so I did this…
>
> $('.formlist li').click(function(e) {
>        if(!$(e.target).is('input')) {
>                $(this).find('input').click();
>        }
> });
>
>
> Can anyone improve upon this? Any way to do it in a jQueryesque one-
> liner and avoid the if statement?
>
> _______________________________________________
>
> UPHPU mailing list
> UPHPU at uphpu.org
> http://uphpu.org/mailman/listinfo/uphpu
> IRC: #uphpu on irc.freenode.net
>