jQuery .touch和.click不工作,但touchstart呢? [iOS的]

时间:2016-12-09 11:45:02

标签: jquery

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

提前感谢您的帮助!

1 个答案:

答案 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>