Fastclick not selecting input for inline elements within a label element

[nnnick]

If there is an inline element inside the label element - the targetElement.tagName isn't 'label', so the findControl function is never hit.

Perhaps check if the parent node is a label then call findControl on the parent node?

FYI using testing iOS 6.0.1

[mattcg]

Thank you for reporting. I think checking at least one level up is acceptable.

[mattcg]

After thinking about this a bit more, I think it'd make more sense to add label > * { pointer-events: none; } to your CSS. The test case I've just committed proves that it works.

I think that's more preferable than add adding a few more lines of code to FastClick. Would you object to this solution?

[nnnick]

Awesome - that's a really nice solution.

Many thanks!

[elliottregan]

It seems to work, but according to MDN, this is still experimental and has been pushed to CSS4 (https://developer.mozilla.org/en-US/docs/CSS/pointer-events).

[kpdecker]

What about label and .needsclick elements that are two levels deep? label *, .needsclick * can solve that case but you are now using two unscoped wildcards in your CSS.

I'm not clear about if this applies or not but it also seems that this fails on Internet Exploder-based touch devices. http://caniuse.com/#search=pointer-events

[lazd]

I too noticed that taps on elements inside of the <label> would not result in the contained radio button being checked. In my case, I was applying style to an <input type="radio"> by means of a <label> containing a <span> styled as block. The same problem resulted when using a <div> instead of a <span> as well, so it should be noted that this problem is not limited to inline elements.

Here's a demonstration of the problem:

http://jsbin.com/owafaq/6

And here's a fixed version using pointer-events: none:

http://jsbin.com/owafaq/11

[mhuggins]

It looks like the label > * { pointer-events: none; } isn't working in the context of a cordova app, unless there's something else I'm doing wrong. My HTML essentially looks like:

<label data-reactid=".0.1.1.0.0.0">
  <span class="checkbox" data-reactid=".0.1.1.0.0.0.0">
    <input type="checkbox" value="Fitness" data-reactid=".0.1.1.0.0.0.0.0">
  </span>
  <span data-reactid=".0.1.1.0.0.0.1">Fitness</span>
</label>

Could it relate to the extra span nested between my label and input elements?

[mhuggins]

I got it after some tinkering. My label was not display: block, so I had to make sure it was actually wrapping the entire region that I wanted clickable.

[schreifels]

For what it's worth, I'm not sure this is an ideal solution, as the the wildcard and child selectors are among the slowest in CSS. See http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/

[matthew-andrews]

Google don't consider CSS performance worth worrying about to provide profiling tools (https://code.google.com/p/chromium/issues/detail?id=265486) and any solution we provide in Javascript is going to be less performant than a * css selector.

[kerryj89]

While the 'pointer-events: none' works for most users, it doesn't work well for those with "heavy" fingers, at least in my case. After seeing older users use the touch interface, in my situation they tend to make heavier taps and it seems to register doubly (to the effect of checking and rapidly unchecking just as they lift their finger). Their taps tend to be somewhere between a normal tap and a selection touch hold. Removing fast-click makes it work 100% of the time in duration between a tap and a selection hold. Do you think this is a limitation of fast-click, or am I doing something wrong?

HTML:
<label><input type="checkbox"><span></span></label>

CSS:

label > * { pointer-events: none; }

input[type=checkbox] {
    display: none;
}
input[type=checkbox] + span {
    display: inline-block;
    position:relative;
    background: #fff;
    border: 1px solid #C8C8C8;
    height: 24px;
    width: 24px;
    padding: 0;
    vertical-align:top;
    margin-left:0.25rem;
    -webkit-transition: background .1s;
    transition: background .1s;
}
input[type=checkbox]:checked + span {
    border: 2px solid #fff;
    outline: 1px solid #C8C8C8;
    background: #2f86c4;
}

[marksy]

@mattcg thanks man, "label > * { pointer-events: none; }" also fixed it for me. Feulf!

[whosesmile]

@mattcg ,thanks~

[ravikiran438]

If cursor needs to be added try like below:
label { cursor:pointer; } label > * {pointer-events:none;}

[jackyon]

label > * { pointer-events: none; }

this works for me. thx!

[tomplays]

thanks guys ! hours spent to find this fix (label > * { pointer-events: none; })

[mzaslavsky]

I suppose it should be pointed out that

label > * { pointer-events: none; }

will affect everything within the label and one may need some specific exceptions in addition to some general ones, such as links within labels:

label a { pointer-events: all; }

I haven't fully tested anything though.

[vinithjsamuel]

/Jquery Fix/
$('input').on('click',function(){ $(this).focus(); });
This worked in my case. Thanks

[cl984430825]

so good,this is good methods