井井客

搜索

如何让JQ鼠标事件兼容手机端

正常情况下,鼠标事件在手机端是无效的,如何让鼠标事件兼容手机端呢?可以自定义事件,如果手机端touch事件有效就执行手端事件,反之则执行鼠标事件,达到这种“兼容”的情况。

如何让JQ鼠标事件兼容手机端

整理后的代码如下,上半部分是自定义事件,下面的是在JQ中的使用:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>如何让JQ鼠标事件同时兼容手机端</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			html,body,.box { width: 100%; height: 100%; padding: 0; margin: 0; }
		</style>
	</head>
	<body>
	<div class="box"></div>
	<script src="http://www.jingjingke.com/res/js/jquery.min.js"></script>
	<script>
		//先判断是否拥甩某一个touch事件
		var hasTouch = 'ontouchstart' in window;
		//接下来去自定义相关事件
		var goTouchStart = hasTouch ? 'touchstart' : 'mousedown',
			goTouchMove = hasTouch ? 'touchmove' : 'mousemove',
			goTouchEnd = hasTouch ? 'touchend' : 'mouseup';
		//开始使用
		$('.box')
		.on(goTouchStart,function(){
			console.log('执行鼠标/手势按下的动作');
		})
		.on(goTouchMove,function(){
			console.log('移动');
		})
		.on(goTouchEnd,function(){
			console.log('鼠标/手势离开的动作');
		})
	</script>
	</body>
</html>

网上看到的,备份下来。

文章TAG:JQ

作者:井井客整理来源:互联网
本文标题:如何让JQ鼠标事件兼容手机端
本文链接:/c/25243.html

上一篇:适用三元条件运算符
下一篇:兼容移动端仿swiper左右滚动图片

文章分类

相关阅读

随便看看