Safari瀏覽器下select標(biāo)簽點(diǎn)擊事件失效了怎么辦?

safari瀏覽器select標(biāo)簽點(diǎn)擊事件失效的解決方案

Safari瀏覽器下select標(biāo)簽點(diǎn)擊事件失效了怎么辦?

在網(wǎng)頁開發(fā)中,JavaScript事件處理是常見操作,但跨瀏覽器兼容性問題時(shí)有發(fā)生。本文探討Safari瀏覽器下select標(biāo)簽點(diǎn)擊事件失效的問題,并提供解決方案。

問題描述:在chrome瀏覽器中,select標(biāo)簽的點(diǎn)擊事件能正常觸發(fā),但在Safari瀏覽器中卻失效。 代碼意圖是在點(diǎn)擊樓棟選擇框(#first_tower_select)時(shí),獲取項(xiàng)目ID,并調(diào)用getBuilding函數(shù)進(jìn)行數(shù)據(jù)請求和更新。

部分代碼片段如下:

html結(jié)構(gòu):

<div class="building_select">   <div class="select_building">     <div class="left_cent">樓棟</div>     <select id="first_tower_select">       <!-- options will be added dynamically -->     </select>     <div class="select_room">       <div class="left_cent">房號</div>       <!-- ... other elements ... -->     </div>   </div> </div>

JavaScript代碼 (問題代碼):

$(document).on('click', '#first_tower_select', function () {   let project_id = $("#first_project_select").val();   if (project_id) {     getBuilding(project_id);   } });  // ... (代碼片段用于動(dòng)態(tài)添加樓棟選項(xiàng)到select標(biāo)簽)...

在Safari瀏覽器中,點(diǎn)擊#first_tower_select不會(huì)觸發(fā)click事件。

解決方案:使用onfocus事件替代onclick事件。onfocus事件在元素獲得焦點(diǎn)時(shí)觸發(fā),在Safari瀏覽器中更可靠。

修改后的JavaScript代碼:

$(document).on('focus', '#first_tower_select', function () {   let project_id = $("#first_project_select").val();   if (project_id) {     getBuilding(project_id);   } });  // ... (代碼片段用于動(dòng)態(tài)添加樓棟選項(xiàng)到select標(biāo)簽)...

通過將click事件替換為focus事件,可以有效解決Safari瀏覽器下select標(biāo)簽點(diǎn)擊事件失效的問題,確保代碼在不同瀏覽器下的兼容性。 請注意,HTML結(jié)構(gòu)中已將樓棟選擇項(xiàng)改為

? 版權(quán)聲明
THE END
喜歡就支持一下吧
點(diǎn)贊11 分享