查看: 349  |  回复: 0
  js PC端和手机端点击事件融合适配
楼主
发表于 2024年6月20日 17:41

有时我们在做响应式网站,需要既在PC在预览,也可以在手机端预览,那么就需要区分下两端的不同交互事件,拿最常用的点击事件举例,PC端点击事件是“click”,在手机端点击事件则是“touchstart”,通常有两种方法解决,

1、使用不同js文件,通过判断终端来引用不同js

<script type="text/javascript">   
 
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|wOSBrowser|BrowserNG|WebOS)/i))) {
		var scriptNode = document.createElement("script");
		scriptNode.setAttribute("src", "js/indexPhone.js");
		document.body.appendChild(scriptNode);
	}
	else {
		var scriptNode = document.createElement("script");
		scriptNode.setAttribute("src", "js/index.js");
		document.body.appendChild(scriptNode);
	}
</script>

2、使用同一个js文件,通过判断终端来区别使用

var changeClick
function isPhone() {
    // 判断是在移动端还是在pc端
    var ua = navigator.userAgent,
        isWindowsPhone = /(?:Windows Phone)/.test(ua),
        isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
        isAndroid = /(?:Android)/.test(ua),
        isFireFox = /(?:Firefox)/.test(ua),
        isChrome = /(?:Chrome|CriOS)/.test(ua),
        isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
        isPhone = /(?:iPhone)/.test(ua),
        isPc = !isPhone && !isAndroid && !isSymbian && !isTablet;
    return !isPc;
}
if (isPhone()) {
    changeClick = 'touchstart'
} else {
    changeClick = 'click'
}
 
$('.box').on(changeClick,function(){
    //点击事件
})

以上可以解决两端交互事件不同的问题。

同样css样式在两端的适配也有两种方法

1、通过js判断移动端和PC端采用两套不同的css样式文件,便于分开管理和开发

<script type="text/javascript">
function loadCSS() {
				 
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|wOSBrowser|BrowserNG|WebOS)/i))) {
	    document.write('<link href="css/indexPhone.css" rel="stylesheet" type="text/css" />');
	}
	else {
		document.write('<link href="css/index.css" rel="stylesheet" type="text/css" />');
	}
}
loadCSS();
</script>

2、css媒体查询

/* 媒体查询 */
@media (min-width: 768px) {
    /* PC样式 */
    .box {
        background:#f00;
    }
}
 
@media (max-width: 767px) {
    /* 移动端样式 */
    .box {
        background:#00f;
    }
}


您需要登录后才可以回帖 登录 | 立即注册
【本版规则】请勿发表违反国家法律的内容,否则会被冻结账号和删贴。
用户名: 立即注册
密码:
2020-2024 MaNongKu.com