解決點擊事件在移動端失效的問題

于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="畢業歌" target="_blank">
<img width="130" height="130" src="http://www.jungjaehyung.com/uploadfile/2024/0808/20240808041141269.jpg">
</a>

這種情況是幾乎沒有任何問題的，但是，如果在img標簽之外，a標簽之內再添加一層元素（如div或者p標簽），在IE6，7下雖然能夠正常顯示鏈接，但是卻無法點擊。即使你給a標簽的樣式加上

cursor:pointer;設置相應的高度和寬度，設置為display:block，依然是無法點擊的。如下所示的布局：

<a 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 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 target="_blank">
<img class="a" src="test.jpg"/>
<img class="b" src="test.jpg"/>
</a>

2.保留div元素，但是去掉觸發haslayout的width和height屬性(實際上這樣只是保留了空架子)。如下

<a 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 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小時內與您取得聯系。

整合營銷服務商

解決點擊事件在移動端失效的問題

您的項目需求