2016-12-09 6 views
1

Grüße stackoverflow - Ich benutze jQuery .click, die auf Touchscreen-Geräten nicht auslöst. Ich habe das Click-Ereignis mit .touchstart funktioniert, aber das ist nicht ideal, da es auch ausgelöst wird, wenn der Benutzer auf den Bildschirm tippt, um einen Bildlauf zu starten.jQuery .touch und .click funktioniert nicht, aber Touchstart tut? [iOS]

Gibt es etwas, das ich vermisse, würde stoppen. Klicken Sie auf ein Touchscreen-Gerät oder .touch?

Grundlegende Geige 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); 
}); 

Vielen Dank im Voraus für jede Hilfe!

+0

'.click()' definitiv sollte auf mobilen Geräten arbeiten. [Hier] (https://www.html5rocks.com/de/mobile/touchandmouse/#toc-1) ist eine geordnete Liste der Ereignisse, die beim Berühren ausgelöst werden. –

+0

Danke @BramVanroy, aber das Hinzufügen von 'cursor: pointer;', wie im möglichen Duplikat erwähnt, hat das Problem behoben. Sieht nach einem iOS-Bug aus. –

Antwort

0

Vielleicht ist es eine nützliche Möglichkeit für Sie, die Ereignisse abhängig davon zu verwenden, welche Ereignisse vom Gerät unterstützt werden. Im Folgenden finden Sie ein Beispiel, wie Sie das für das "click" -Ereignis tun können. Es prüft auf Unterstützung von pointerEvent api oder berührt Unterstützung in dieser Reihenfolge und verwendet die entsprechenden Ereignisse. Wenn beide nicht unterstützt werden, wird standardmäßig das Click-Ereignis verwendet. Welches Gerät auch immer verwendet wird, nur ein Ereignis wird ausgelöst.

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

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

Verwandte Themen