兼容苹果手机浏览器的事件绑定
2018-01-18 14:41
239 查看
在做一个微信公众号项目的时候，遇到了苹果手机微信浏览器跟安卓微信浏览器事件绑定的不同。
TestCode1：
TestCode1的测试结果说明，对于页面上固有的元素（即不是JavaScript动态创建插入到页面的元素），使用jquery的on方法进行绑定，安卓和苹果的表现是一样的。
TestCode2:
TestCode2的测试结果说明：对于JavaScript动态创建并且直接插入到body中的DOM元素及其子元素（即：这些JavaScript动态创建的DOM元素，只能直接插入到body元素中，body是他们的直接父级，在TestCode2这个例子中，body是#boxme的直接父级），使用jquery的on方法绑定给这些DOM元素的事件，安卓可以响应，但苹果不可以响应。
TestCode3:
TestCode3的测试结果说明：对于JavaScript动态创建的DOM元素及其子元素，如果并不直接插入到body中，而是插入到body中固有存在的其他DOM元素中，使用jquery的on方法绑定给这些DOM元素的事件，安卓和苹果都可以响应。
TestCode4：
最后：对于由JavaScript动态并且直接插入body中的DOM元素，兼容安卓和苹果的事件绑定写法是：在动态创建DOM以后，逐个给创建的DOM对象绑定事件。
TestCode1：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>测试兼容苹果的事件绑定写法</title>
<style type="text/css">
.test{background:#d4d4d4;color:#333;font-size:14px;height:40px;text-align:center;line-height:40px;border-radius:5px;margin:20px}
.test:active{background:#a3a3a3}
</style>
</head>
<body class="wraper">
<div id="boxme">
<div class="test test1">测试Body绑定事件</div>
<div class="test test2">测试Document绑定事件</div>
<div class="test test3" style="background:#bbb">测试window绑定事件</div>
<div class="test test4">测试html绑定事件</div>
<div class="test test5">测试DivID绑定事件</div>
</div>
<script src="jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("body").on("click",".test1",function(){alert("body 绑定事件有效")}); //安卓和苹果都能响应点击
$(document).on("click",".test2",function(){alert("document 绑定事件有效")}); //苹果和安卓都能响应点击
$(window).on("click",".test3",function(){alert("window 绑定事件有效")}); //安卓和苹果都不能响应，除非将window的首字母w大写才能响应点击
$("html").on("click",".test4",function(){alert("html 绑定事件有效")}); //安卓和苹果都能响应点击
$(".wraper").on("click",".test5",function(){alert("DIV ID 绑定事件有效")}); //安卓和苹果都能响应点击
});
</script>
</body>
</html>TestCode1的测试结果说明，对于页面上固有的元素（即不是JavaScript动态创建插入到页面的元素），使用jquery的on方法进行绑定，安卓和苹果的表现是一样的。
TestCode2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>测试兼容苹果的事件绑定写法</title>
<style type="text/css">
.test{background:#d4d4d4;color:#333;font-size:14px;height:40px;text-align:center;line-height:40px;border-radius:5px;margin:20px}
.test:active{background:#a3a3a3}
</style>
</head>
<body class="wraper">
<div class="test" id="createBox" style="border:#f30 1px solid;background:#fff;color:#f30" onclick="createBox()">动态创建DOM元素</div>
<script src="jquery-2.0.3.min.js"></script>
<script type="text/javascript">
function createBox(){
var htmlstr = '<div id="boxme">';
htmlstr += '';
htmlstr += ' <div class="test test1">测试IOS Body绑定事件</div>';
htmlstr += ' <div class="test test2">测试IOS Document绑定事件</div>';
htmlstr += ' <div class="test test3" style="background:#bbb">测试IOS window绑定事件</div>';
htmlstr += ' <div class="test test4">测试IOS html绑定事件</div>';
htmlstr += ' <div class="test test5">测试IOS bodyclass绑定事件</div>';
htmlstr += '</div>';
$(htmlstr).appendTo("body");
}
$(function(){
$("body").on("click",".test1",function(){alert("body 绑定事件有效")}); //安卓能响应，苹果不能
$(document).on("click",".test2",function(){alert("document 绑定事件有效")}); //安卓能响应，苹果不能
$(window).on("click",".test3",function(){alert("window 绑定事件有效")}); //将window首字母大写，则安卓能响应，苹果不能。window首字母不大写，则安卓和苹果都不能
$("html").on("click",".test4",function(){alert("html 绑定事件有效")}); //安卓能响应，苹果不能
$("#boxme").on("click",".test5",function(){alert("DIV ID 绑定事件有效")}); //安卓和苹果都不能响应
});
</script>
</body>
</html>TestCode2的测试结果说明：对于JavaScript动态创建并且直接插入到body中的DOM元素及其子元素（即：这些JavaScript动态创建的DOM元素，只能直接插入到body元素中，body是他们的直接父级，在TestCode2这个例子中，body是#boxme的直接父级），使用jquery的on方法绑定给这些DOM元素的事件，安卓可以响应，但苹果不可以响应。
TestCode3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>测试兼容苹果的事件绑定写法</title>
<style type="text/css">
.test{background:#d4d4d4;color:#333;font-size:14px;height:40px;text-align:center;line-height:40px;border-radius:5px;margin:20px}
.test:active{background:#a3a3a3}
</style>
</head>
<body class="wraper">
<div class="test" id="createBox" style="border:#f30 1px solid;background:#fff;color:#f30" onclick="createBox()">动态创建DOM元素</div>
<div id="boxme"></div>
<script src="jquery-2.0.3.min.js"></script>
<script type="text/javascript">
function createBox(){
var htmlstr = '';
htmlstr += '';
htmlstr += ' <div class="test test1">测试IOS Body绑定事件</div>';
htmlstr += ' <div class="test test2">测试IOS Document绑定事件</div>';
htmlstr += ' <div class="test test3" style="background:#bbb">测试IOS window绑定事件</div>';
htmlstr += ' <div class="test test4">测试IOS html绑定事件</div>';
htmlstr += ' <div class="test test5">测试IOS bodyclass绑定事件</div>';
$(htmlstr).appendTo("#boxme");
}
$(function(){
$("body").on("click",".test1",function(){alert("body 绑定事件有效")}); //安卓和苹果都可以响应
$(document).on("click",".test2",function(){alert("document 绑定事件有效")}); //安卓和苹果都可以响应
$(window).on("click",".test3",function(){alert("window 绑定事件有效")}); //window首字母大写后，安卓和苹果都可以响应
$("html").on("click",".test4",function(){alert("html 绑定事件有效")}); //安卓和苹果都可以响应
$("#boxme").on("click",".test5",function(){alert("DIV ID 绑定事件有效")}); //安卓和苹果都可以响应
});
</script>
</body>
</html>TestCode3的测试结果说明：对于JavaScript动态创建的DOM元素及其子元素，如果并不直接插入到body中，而是插入到body中固有存在的其他DOM元素中，使用jquery的on方法绑定给这些DOM元素的事件，安卓和苹果都可以响应。
TestCode4：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>测试兼容苹果的事件绑定写法</title>
<style type="text/css">
.test{background:#d4d4d4;color:#333;font-size:14px;height:40px;text-align:center;line-height:40px;border-radius:5px;margin:20px}
.test:active{background:#a3a3a3}
</style>
</head>
<body class="wraper">
<div class="test" id="createBox" style="border:#f30 1px solid;background:#fff;color:#f30">动态创建DOM元素</div>
<script src="jquery-2.0.3.min.js"></script>
<script type="text/javascript">
function createBox(){
var htmlstr = '<div id="boxme">';
htmlstr += '';
htmlstr += ' <div class="test test1">测试IOS Body绑定事件</div>';
htmlstr += ' <div class="test test2">测试IOS Document绑定事件</div>';
htmlstr += ' <div class="test test3" style="background:#bbb">测试IOS window绑定事件</div>';
htmlstr += ' <div class="test test4">测试IOS html绑定事件</div>';
htmlstr += ' <div class="test test5">测试IOS bodyclass绑定事件</div>';
htmlstr += '</div>';
var boxme = $(htmlstr).appendTo(".wraper");
boxme.find(".test").each(function(i, e) {
var el = $(e);
el.click(function() {
alert("安卓和苹果都可以点击了");
});
});
return boxme;
}
</script>
</body>
</html>最后：对于由JavaScript动态并且直接插入body中的DOM元素，兼容安卓和苹果的事件绑定写法是：在动态创建DOM以后，逐个给创建的DOM对象绑定事件。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 微信浏览器兼容性问题—Android手机下拉框绑定事件在手机触屏事件中不生效；
- javascript（六）js事件绑定浏览器兼容解决方案 attachEvent addEventListener
- 阻止浏览器自身滑动事件 例如苹果手机的上拉下拉滑动
- 原生JS绑定滑轮滚动事件兼容常见浏览器
- JS添加/绑定事件监听函数并传参数attachEvent和addEventListener兼容个浏览器
- 原生JS绑定滑轮滚动事件，兼容浏览器
- 原生JS绑定滑轮滚动事件兼容常见浏览器
- 给浏览器绑定鼠标滚动事件（兼容FireFox）
- js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
- js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
- js鼠标滑轮滚动事件绑定（兼容主流浏览器）
- 兼容浏览器的js事件绑定函数(详解)
- 【事件绑定的方式】兼容浏览器的事件监听器的设计
- 关于怎么绑定Jquery 的scroll事件（兼容浏览器）
- js鼠标滑轮滚动事件绑定（兼容主流浏览器）
- JS获取回车事件（兼容各浏览器）
- jQuery获取浏览器大小并绑定事件
- firefox浏览器兼容event事件方法
- Axure RP Pro - 相关问题 - OnMouseOver事件和Rollover翻转效果浏览器不兼容
- 兼容各个浏览器版本的事件监听器工具