Greetings stackoverflow - 我正在使用jQuery .click，它不会在触摸屏设备上触发。我使用.touchstart进行了点击事件，但这并不理想，因为当用户点击屏幕开始滚动时它也会触发。
我有什么遗漏会阻止.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 :(得分：0)
根据设备支持的事件，使用事件可能是一种有用的方式。以下是如何为“点击”事件执行此操作的示例。它按此顺序检查pointerEvent api或touch支持的支持，并使用相应的事件。如果两者都不受支持，则默认为标准点击事件。因此，无论使用何种设备，都只会触发一个事件。
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>