代码改变世界

兼容苹果手机浏览器的事件绑定

2018-01-18 14:41  盛世游侠  阅读(901)  评论(0)  编辑  收藏  举报

在做一个微信公众号项目的时候，遇到了苹果手机微信浏览器跟安卓微信浏览器事件绑定的不同。

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对象绑定事件。

 

 

 

 

另外，还在网上看到以下办法：（未亲自测试，待测）

 

将h5页面放到ios客户端加载操作的时候，发现用jquery绑定的节点事件都是失效的。

 

解决办法有下面的四种方式：

1、将 click 事件直接绑定到目标元素（即 .target）上

2、将目标元素换成 <a> 或者 button 等可点击的元素

3、将 click 事件委托到非 document 或 body 的父级元素上

4、给目标元素加一条样式规则 cursor: pointer;

推荐后两种。从解决办法来看，推测在 safari 中，不可点击的元素的点击事件不会冒泡到父级元素。通过添加 cursor: pointer 使得元素变成了可点击的了。

 

更新于2018-12-24

1、当元素是用ajax添加进来的，绑定事件可以使用$(document).('click','#a',function(){});

2、当元素是直接页内元素的话，建议使用$('#a').on('click',function(){});