1

Greetings stackoverflow - I'm using jQuery .click, which is not triggering on touchscreen devices. I've got the click event working using .touchstart, but that's not ideal since it also triggers when the user taps the screen to begin a scroll.

Is there anything I'm missing that would stop .click or .touch working on a touchscreen device?

Basic fiddle here.

HTML:

<form class="form-horizontal">
    <div class="container-fluid constraint">
        <h3>Style</h3>
        <div class="control-group">
            <label class="checkbox">
                <input type="checkbox" data-facet="28" data-constraint="2" data-cat="205" value="1"> 
                <span>Anti-slip</span>
            </label>
            <label class="checkbox">
                <input type="checkbox" data-facet="5" data-constraint="2" data-cat="205" value="1"> 
                <span>Cement/Concrete</span>
            </label>
            <label class="checkbox">
                <input type="checkbox" data-facet="18" data-constraint="2" data-cat="205" value="1"> 
                <span>Contemporary</span>
            </label>
            <label class="checkbox">
                <input type="checkbox" data-facet="23" data-constraint="2" data-cat="205" value="1"> 
                <span>Encaustic</span>
            </label>
            <label class="checkbox">
                <input type="checkbox" data-facet="17" data-constraint="2" data-cat="205" value="1"> 
                <span>Hexagon</span>
            </label>
            <label class="checkbox">
                <input type="checkbox" data-facet="24" data-constraint="2" data-cat="205" value="1"> 
                <span>Large Format</span>
            </label>
            <label class="checkbox">
                <input type="checkbox" data-facet="48" data-constraint="2" data-cat="205" value="1"> 
                <span>Marble</span>
            </label>
            <label class="checkbox">
                <input type="checkbox" data-facet="29" data-constraint="2" data-cat="205" value="1"> 
                <span>Mosaic</span>
            </label>
            <label class="checkbox">
                <input type="checkbox" data-facet="26" data-constraint="2" data-cat="205" value="1"> 
                <span>Outdoor</span>
            </label>
            <label class="checkbox">
                <input type="checkbox" data-facet="25" data-constraint="2" data-cat="205" value="1"> 
                <span>Slim Porcelain</span>
            </label>
            <label class="checkbox">
                <input type="checkbox" data-facet="4" data-constraint="2" data-cat="205" value="1"> 
                <span>Stone</span>
            </label>
            <label class="checkbox">
                <input type="checkbox" data-facet="22" data-constraint="2" data-cat="205" value="1"> 
                <span>Traditional</span>
            </label>
            <label class="checkbox">
                <input type="checkbox" data-facet="54" data-constraint="2" data-cat="205" value="1"> 
                <span>Wood</span>
            </label>
        </div>
    </div>
</form>

CSS:

.constraint {
  margin-bottom: 20px;
}

.constraint h3 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.constraint .control-group {
  display: none;
}

jQuery:

$(document).on('click touch', '.constraint h3', function() {
    $(this).next('.control-group').slideToggle(500);
});

Thanks in advance for any help!

Ryan Gee
  • 394
  • 1
  • 9
  • `.click()` most definitely should work on mobile devices. [Here](https://www.html5rocks.com/en/mobile/touchandmouse/#toc-1) is an ordered list of the events that are triggered when touching. – Bram Vanroy Dec 09 '16 at 11:49
  • Thanks @BramVanroy, but adding `cursor: pointer;`, as mentioned in the possible duplicate, has fixed the issue. Looks like an iOS bug. – Ryan Gee Dec 09 '16 at 12:11

1 Answers1

0

Maybe it's a useful way for you to use the events depending on which events are supported by the device. Below is an example how you could do that for the "click" event. It checks for support of pointerEvent api or touch support in this order and uses the corresponding events. If both are not supported it defaults to the standard click event. So whatever device is used, only one event is fired.

var clickevent;
if ('onpointerdown' in window) {
    clickevent = 'pointerdown';
} else if ('ontouchstart' in window) {
    clickevent = 'touchstart';
} else {
    clickevent = 'click';
}

$(document).on(clickevent, '.constraint h3', function() {
 $(this).next('.control-group').slideToggle(500);
});
.constraint {
  margin-bottom: 20px;
}

.constraint h3 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.constraint .control-group {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal">
  <div class="container-fluid constraint">
   <h3>Style</h3>
   <div class="control-group">
   <label class="checkbox">
    <input type="checkbox" data-facet="28" data-constraint="2" data-cat="205" value="1"> 
    <span>Anti-slip</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="5" data-constraint="2" data-cat="205" value="1"> 
    <span>Cement/Concrete</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="18" data-constraint="2" data-cat="205" value="1"> 
    <span>Contemporary</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="23" data-constraint="2" data-cat="205" value="1"> 
    <span>Encaustic</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="17" data-constraint="2" data-cat="205" value="1"> 
    <span>Hexagon</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="24" data-constraint="2" data-cat="205" value="1"> 
    <span>Large Format</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="48" data-constraint="2" data-cat="205" value="1"> 
    <span>Marble</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="29" data-constraint="2" data-cat="205" value="1"> 
    <span>Mosaic</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="26" data-constraint="2" data-cat="205" value="1"> 
    <span>Outdoor</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="25" data-constraint="2" data-cat="205" value="1"> 
    <span>Slim Porcelain</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="4" data-constraint="2" data-cat="205" value="1"> 
    <span>Stone</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="22" data-constraint="2" data-cat="205" value="1"> 
    <span>Traditional</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="54" data-constraint="2" data-cat="205" value="1"> 
    <span>Wood</span>
   </label>
  </div>
 </div>
 <div class="container-fluid constraint">
  <h3>Colour</h3>
  <div class="control-group">
   <label class="checkbox">
    <input type="checkbox" data-facet="2" data-constraint="1" data-cat="205" value="1"> 
    <span>Beige</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="43" data-constraint="1" data-cat="205" value="1"> 
    <span>Black</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="40" data-constraint="1" data-cat="205" value="1"> 
    <span>Blue</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="1" data-constraint="1" data-cat="205" value="1"> 
    <span>Brown</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="7" data-constraint="1" data-cat="205" value="1"> 
    <span>Cream</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="41" data-constraint="1" data-cat="205" value="1"> 
    <span>Green</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="42" data-constraint="1" data-cat="205" value="1"> 
    <span>Grey</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="44" data-constraint="1" data-cat="205" value="1"> 
    <span>Metallic</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="45" data-constraint="1" data-cat="205" value="1"> 
    <span>Multi Coloured</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="9" data-constraint="1" data-cat="205" value="1"> 
    <span>Orange</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="11" data-constraint="1" data-cat="205" value="1"> 
    <span>Pink</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="39" data-constraint="1" data-cat="205" value="1"> 
    <span>Purple</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="10" data-constraint="1" data-cat="205" value="1"> 
    <span>Red</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="8" data-constraint="1" data-cat="205" value="1"> 
    <span>White</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="3" data-constraint="1" data-cat="205" value="1"> 
    <span>Yellow</span>
   </label>
  </div>
 </div>
 <div class="container-fluid constraint">
  <h3>Finish</h3>
  <div class="control-group">
   <label class="checkbox">
    <input type="checkbox" data-facet="46" data-constraint="4" data-cat="205" value="1"> 
    <span>Antique</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="47" data-constraint="4" data-cat="205" value="1"> 
    <span>Gloss</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="14" data-constraint="4" data-cat="205" value="1"> 
    <span>Honed</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="13" data-constraint="4" data-cat="205" value="1"> 
    <span>Matt</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="55" data-constraint="4" data-cat="205" value="1"> 
    <span>Pattern</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="15" data-constraint="4" data-cat="205" value="1"> 
    <span>Polished</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="16" data-constraint="4" data-cat="205" value="1"> 
    <span>Textured</span>
   </label>
  </div>
 </div>
 <div class="container-fluid constraint">
  <h3>Material</h3>
  <div class="control-group">
   <label class="checkbox">
    <input type="checkbox" data-facet="31" data-constraint="5" data-cat="205" value="1"> 
    <span>Glass</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="20" data-constraint="5" data-cat="205" value="1"> 
    <span>Glazed Ceramic</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="19" data-constraint="5" data-cat="205" value="1"> 
    <span>Porcelain</span>
   </label>
  </div>
 </div>
 <div class="container-fluid constraint">
  <h3>Size</h3>
  <div class="control-group">
   <label class="checkbox">
    <input type="checkbox" data-facet="57" data-constraint="9" data-cat="205" value="1"> 
    <span>200x200mm</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="58" data-constraint="9" data-cat="205" value="1"> 
    <span>300x300mm</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="59" data-constraint="9" data-cat="205" value="1"> 
    <span>300x600mm</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="62" data-constraint="9" data-cat="205" value="1"> 
    <span>600x1200mm</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="60" data-constraint="9" data-cat="205" value="1"> 
    <span>600x600mm</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="61" data-constraint="9" data-cat="205" value="1"> 
    <span>750x750mm</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="56" data-constraint="9" data-cat="205" value="1"> 
    <span>75x300mm</span>
   </label>
  </div>
 </div>
 <div class="container-fluid constraint">
  <h3>User</h3>
  <div class="control-group">
   <label class="checkbox">
    <input type="checkbox" data-facet="34" data-constraint="8" data-cat="205" value="1"> 
    <span>Bathroom</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="49" data-constraint="8" data-cat="205" value="1"> 
    <span>Commercial</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="37" data-constraint="8" data-cat="205" value="1"> 
    <span>External</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="52" data-constraint="8" data-cat="205" value="1"> 
    <span>Floor</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="50" data-constraint="8" data-cat="205" value="1"> 
    <span>Hospitality/Leisure</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="36" data-constraint="8" data-cat="205" value="1"> 
    <span>Internal</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="32" data-constraint="8" data-cat="205" value="1"> 
    <span>Kitchen</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="35" data-constraint="8" data-cat="205" value="1"> 
    <span>Living Areas</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="51" data-constraint="8" data-cat="205" value="1"> 
    <span>Residential</span>
   </label><label class="checkbox">
    <input type="checkbox" data-facet="53" data-constraint="8" data-cat="205" value="1"> 
    <span>Wall</span>
   </label>
  </div>
 </div>
</form>
Flyer53
  • 754
  • 6
  • 14