跨瀏覽器JavaScript事件監聽：safari與chrome的差異及解決方案
開發網頁時，JavaScript代碼的跨瀏覽器兼容性至關重要。本文探討一個在Chrome瀏覽器中正常運行，但在Safari瀏覽器中失效的標簽點擊事件問題，并提供有效的解決方案。
問題描述：
使用$(document).on(‘click’, ‘#first_tower_select’, function () { … });監聽#first_tower_select元素的點擊事件，并在點擊時調用getBuilding函數更新下拉框選項。此代碼在Chrome中運行良好，但在Safari中卻無法觸發點擊事件。
代碼示例：
立即學習“Java免費學習筆記（深入）”；
html結構：
<div class="building_select"> <div class="select_building"> <div class="left_cent">樓棟</div> <optgroup disabled="disabled" hidden=""></optgroup>全部<div class="select_room"> <div class="left_cent">房號</div> <optgroup disabled="disabled" hidden=""></optgroup>全部層<optgroup disabled="disabled" hidden=""></optgroup>全部房</div> </div> </div>
JavaScript代碼：
$(document).on('click', '#first_tower_select', function () { let project_id = $("#first_project_select").val() if (project_id) { getBuilding(project_id) } }); /* 樓棟下拉框 */ for (let k in res) { html += "" + res[k].building_no + ""; } $("#first_tower_select").append(html); $("#first_tower_select").find('option[value="' + oldVal + '"]').prop('selected', 'selected');
問題分析與解決方案：
Safari和Chrome瀏覽器處理元素點擊事件的機制存在差異。click事件在Safari中，尤其是在下拉菜單交互過程中，可能無法可靠地捕獲所有點擊操作。
建議使用focus事件替代click事件。focus事件在元素獲得焦點時觸發，通常比click事件更可靠。修改后的代碼如下：
$(document).on('focus', '#first_tower_select', function () { let project_id = $("#first_project_select").val() if (project_id) { getBuilding(project_id) } });
通過此方法，可在Safari瀏覽器中確保事件被正確觸發并執行相應操作，從而解決跨瀏覽器兼容性問題。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
喜歡就支持一下吧
相關推薦
