小贝子编程

jQuery .Touch和.单击不起作用，但是TouchStart会吗?[ios]



问候stackoverflow-我正在使用jQuery .Click，它没有在触摸屏设备上触发。我已经使用.touchstart使用了点击事件，但这不是理想的选择，因为当用户点击屏幕开始滚动时，它也会触发。

我错过的东西会停止。单击或在触摸屏设备上工作吗？

基本小提琴。

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

事先感谢您的任何帮助！

也许这是您根据设备支持哪些事件使用这些事件的有用方法。以下是一个示例，您如何为"点击"事件做到这一点。它检查了Pointerevent API的支持或按照此顺序触摸支持，并使用相应的事件。如果不支持两者，则默认为标准点击事件。因此，无论使用什么设备，都只会发射一个事件。

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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium