2016-12-09 2 views
1

Greetings stackoverflow - jQuery .clickを使用していますが、これはタッチスクリーンデバイスでは起動していません。 .touchstartを使用してclickイベントを処理していますが、ユーザーが画面をタップしてスクロールを開始したときにトリガーされるため、理想的ではありません。jQueryの.touchと.clickは動作しませんが、touchstartは機能しますか? [iOS]

タッチスクリーンデバイスで動作している.clickまたは.touchを停止する方法がありますか?

基本フィドル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); 
}); 

任意の助けを事前に感謝!

+0

'.click()'、ほとんど間違いなくモバイルデバイス上で動作するはずです。 [Here](https://www.html5rocks.com/jp/mobile/touchandmouse/#toc-1)は、タッチするとトリガされるイベントの順序付きリストです。 –

+0

@BramVanroyに感謝しますが、可能な複製で述べた 'cursor:pointer;'を追加することで問題は解決しました。 iOSのバグのようです。 –

答えて

0

これは、デバイスでサポートされているイベントに応じて、イベントを使用する便利な方法です。以下は「クリック」イベントのための操作の例です。これは、pointerEvent apiのサポートを確認したり、サポートをこの順にチェックしたり、対応するイベントを使用したりします。両方がサポートされていない場合、デフォルトのクリックイベントがデフォルトになります。どんなデバイスが使われても、1つのイベントだけが起動されます。

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>

関連する問題