背景：
我的网站是在magento开源电子商务解决方案,而在顶部(标题)它有一个购物车图标.在dekstop上,当用户将鼠标悬停在该图标上时,它会显示购物车中的内容(项目).但是,点击该图标,用户需要购物车页面.
我想要：
我想拥有只有触摸设备的能力,当用户单击图标时,才应该只显示内容,但是当双击图标时,应该将它们带到购物车页面.
<div id="mini-cart" class="dropdown is-not-empty">
<!-- This below div is always visible and on tap of this or either of it's any elements,required behavIoUr is expected -->
<div class="dropdown-toggle cover" title="View Bag">
<div class="feature-icon-hover">
<a href="example.com/checkout/cart/" title="Shopping Bag">
<span class="first close-to-text icon i-cart-wb force-no-bg-color"> </span>
<div class="hide-below-960">My Bag</div>
</a>
<div class="label amount">
<a href="example.com/checkout/cart/" title="Shopping Bag">(1)</a>
</div>
<a class="summary" href="example.com/checkout/cart/" title="Shopping Bag">
<span class="subtotal">
<span class="price">$28</span>
</span>
</a>
<span class="caret"> </span>
</div> <!-- end: dropdown-toggle > div -->
</div> <!-- end: dropdown-toggle -->
<!-- This one is invisible by default,and needs to be shown on single tap -->
<div class="dropdown-menu left-hand" style="display: none;">
<!-- All THE CONTENT GOES HERE -->
</div>
</div>
我已经试过了
jQuery(function($){
/* Code to detect the user agent,if mobile device then execute the code*/
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
// on single touch
$("#mini-cart .dropdown-toggle").on('click','a',function(e){
e.preventDefault();
$("#mini-cart .dropdown-menu").show();
});
// on double touch
$("#mini-cart .feature-icon-hover").find('a').dblclick(function(e){
location.href = '/checkout/cart';
//alert('dblclick');
});
}
});
此代码确实防止单击鼠标的默认行为,但不显示内容div,也不会双击任何内容.顺便说一下,我正在三星级测试它,不知道它是否是一个正确的测试设备,并使用JQUERY PLUGIN(而不是jquery手机).
解决方法
如果您想要定位移动设备,那么您可以使用touchset,这是相当于mousedown的触摸.虽然触摸功能的桌面浏览器也可以使用这一点,所以也许您仍然需要进行用户代理检测,如果这不适合您.最后我检查了,没有任何内置的“双击”事件我们可以挂钩,但我们可以手动检查一个水龙头或双击.代码看起来像
var tapped=false
$("#mini-cart .dropdown-toggle").on("touchstart",function(e){
if(!tapped){ //if tap is not set,set up single tap
tapped=setTimeout(function(){
tapped=null
//insert things you want to do when single tapped
},300); //wait 300ms then run single click code
} else { //tapped within 300ms of last tap. double tap
clearTimeout(tapped); //stop single tap callback
tapped=null
//insert things you want to do when double tapped
}
e.preventDefault()
});
这应该在任何触摸启用的浏览器上工作.
一个替代方案,虽然有点重,只是这个,是使用Hammer.js.它是一个非常好的图书馆处理触摸事件.并且它还将鼠标和触摸事件聚合成一种类型的事件.例如,点击和双击它将基本上是
Hammer(el).on("tap",function() {
//singletap stuff
});
Hammer(el).on("doubletap",function() {
//doubletap stuff
});
这也适用于鼠标事件,这可能不是你想要的.如果只是为了这个,这有点过分了但是如果你打算做更多的触摸相关的东西,我建议使用这个库.
