Open UncleBill opened 8 years ago
I use Label
to wrap radio box, to trigger checking by clicking on Label
:
<ul class="cells" id="issueTypeList">
<li class="cell-row">
<label class="cell">
<div class="cell-body ">issue 1</div>
<div class="cell-foot">
<input type="radio" class="cell-radio" name='tmpname' />
</div>
</label>
</li>
<li class="cell-row">
<label class="cell">
<div class="cell-body ">
issue 2
</div>
<div class="cell-foot">
<input type="radio" class="cell-radio" name='tmpname' />
</div>
</label>
</li>
</ul>
But it doesnt' work on iOS (tested on iOS 9 device and Chrome iOS {8,9} Emulation , so far).
So I set breakpoint in fastclick's source code:
You can see that the target
is not label.cell
but div.cell-body
. However it's label.cell
on Android Emulation. Then I add needsclick
class to div.cell-body
, it works properly. And I came with an idea: we can check if target
is wrapped by Label
(Button
, too).
Just update the patch.
- return (/\bneedsclick\b/).test(target.className);
+ return (/\bneedsclick\b/).test(target.className) || parentNeedsClick(target);
};
+ function parentNeedsClick(ele) {
+ if (deviceIsAndroid) {
+ return false;
+ }
+ var p = ele;
+ var tagName;
+ while(p.parentElement) {
+ tagName = p.parentElement.tagName.toLowerCase();
+ if (tagName == 'label' || tagName == 'button') {
+ console.log('yes');
+ return true;
+ }
+ p = p.parentElement;
+ }
+ return false;
+ }
+
You can see that the target is not label.cell but div.cell-body (iOS). However it's label.cell on Android Emulation.
Please ignore the patch. I think this is a bug.
Code should show my idea: