解决点击事件在移动端失效的问题

于on点击事件在ios中失效的问题

IPhone中H5页面用on绑定click无效的解决方法

关于jquery中on绑定click事件在苹果手机失效的问题

如果不用必须用click，则换成touch自然不存在本文的bug。

当用如下方法绑定click事件时，

下文的selector指的是你选择的元素，可以用id或者class

$(document).on('click','selector',function(){ });

发现在PC各种浏览器，以及移动端模拟器上都是可以正常调试的，但是在ios的微信端访问或浏览器访问均有不同程度的无效情况，

解决的方法很巧妙，就是给需要绑定事件的元素添加一个css

页中的选择文件其实很简单就一个文件选择控件而已。

其实用这个默认的显示出来的样子在网页中不好看，常常我们为了美观，可能会采用下面的方式来实现。

首先将file隐藏起来。

然后弄个文本框，弄个按钮来进行文件选择。

<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>  选择...

</button>

</span>

</div>

这样是不是比原始的效果要好看多了。

那么file已经被隐藏了，点击按钮如何弹出选择文件的框呢，用jquery来触发file的单击事件即可。

$("#openFile").click(function(){

$("#file").trigger("click");

});

我这边想要在文件选择完之后就马上上传文件到服务器，就只能在file的change事件中进行上传了。

$("#file").change(function(){

//upload....

});

这样确实可以实现上传，问题是这种方式只有第一次选择文件的时候可以，紧跟着第二次来选文件，会发现选中之后没反应了，触发不了change事件了。

解决这问题的唯一办法就是不要用jquery这种绑定事件的方法来实现change,直接在file中加上onchange即可。

题描述：

web应用中，经常需要在图片上添加相应的链接，而且相对于传统的文字链接的方式，不仅美观，而且有更大的可点击区域。例如，京东网图书页面的一个简单布局：

<a title="毕业歌" href="http://item.jd.com/11366857.html" target="_blank">
<img width="130" height="130" src="http://www.hmttv.cn/uploadfile/2024/0808/20240808041141269.jpg">
</a>

这种情况是几乎没有任何问题的，但是，如果在img标签之外，a标签之内再添加一层元素（如div或者p标签），在IE6，7下虽然能够正常显示链接，但是却无法点击。即使你给a标签的样式加上

cursor:pointer;设置相应的高度和宽度，设置为display:block，依然是无法点击的。如下所示的布局：

<a href="http://blog.csdn.net/ohmygirl?viewmode=contents" target="_blank">
<div class="a">
<img src="test.jpg"/>
</div>
<div class="b">
<img src="test.jpg"/>
</div>
</a>

对应的样式为：

.a,.b{
width:140px;
height:140px;
float:left;
margin:10px 0 10px 10px;
display:inline;
}

在IE6 ,7下，右键点击可以显示“在新标签中打开链接”等选项，证明不是a链接无效。而且在两图片的margin的空白区域，是可以点击的，只有图片的区域却无法点击（也就是图片区域的连接失效了）

这是由于，在IE6,7中，由于触发了img标签的父元素的hasLayout属性，从而使得父元素（这里是div元素）自己的布局掩盖了a标签的链接。这一点，我们可以通过禁用img父元素的样式来证明：

<a href="http://blog.csdn.net/ohmygirl?viewmode=contents" target="_blank">
<div>
<img src="test.jpg"/>
</div>
<div>
<img src="test.jpg"/>
</div>
</a>

这种布局下：图片的区域是可以点击的。

具有hasLayout属性的标签（默认haslayout值为true）：

<html> <body> <table> <tr> <td> <td> <img> <hr> <input> <button> <select> <textarea> <fieldset> <legend><iframe> <embed> <object> <applet> <marquee>

能够触发hasLayout的css属性(样式有)：

display:inline-block;

float:left|right;

width(height):除了auto之外的值。

position:absolute;

zoom:1 显式开启hasLayout。

Ie7下触发hasLayout的样式属性还有：

min-width,min-height等。

关于haslayout的更多细节，也可以参考这篇文章：

http://www.jb51.net/web/77542.html

知道了原因，针对以上的问题，解决的方案有：

1.去掉img标签的元div元素，将父元素的样式迁移到img标签上，布局如下：

<a href="http://blog.csdn.net/ohmygirl?viewmode=contents" target="_blank">
<img class="a" src="test.jpg"/>
<img class="b" src="test.jpg"/>
</a>

2.保留div元素，但是去掉触发haslayout的width和height属性(实际上这样只是保留了空架子)。如下

<a href="http://blog.csdn.net/ohmygirl?viewmode=contents" target="_blank">
<div>
<img class="a" src="test.jpg"/>
</div>
<div>
<img class="b" src="test.jpg"/>
</div>
</a>

完整的测试代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
<title>关于 hasLayout</title>
<style type="text/css">
html,body,div,p,a,img{
margin:0;
border:0;
}
.wrapper{
width:312px;
text-align:center;
margin:0 auto;
margin-top:100px;
border:1px solid red;
}
.a,.b{
width:140px;
height:140px;
float:left;
margin:10px 0 10px 10px;
display:inline;
}
</style>
</head>
<body>
<div class="wrapper">
<a href="http://blog.csdn.net/ohmygirl?viewmode=contents" target="_blank">
<div class="a">
<img src="test.jpg"/>
</div>
<div class="b">
<img src="test.jpg"/>
</div>
</a>
</div>
</body>
</html>

请在IE6,7下测试。

在线咨询

上一篇：Steam登录不上/网页打不开无法加载怎么办最新解决方法分享
下一篇：HTML 颜色

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

解决点击事件在移动端失效的问题

您的项目需求