9-12 8,944 views
今天在做移动端页面，测试时发现一个问题，ios的safari下，下面的div点击后不触发click事件：
- <script>
- $(document).on('click','.div_test', function() {
- alert("you click it!");
- })
- </script>
- <div class="div_test">测试div</div>
于是我做了以下尝试：
1.将div换成a标签，有效，但不是我要的解决办法。
2.事件问题？将click换成touchstart，有效。
3.难道是不支持事件代理？直接为指定div注册事件：
- <script>
- function addClick() {
- document.getElementById("div_test").onclick = function() {
- alert("you click it!");
- }
- }
- </script>
- <input type="button" value="btn_test" onclick="addClick()" />
- <div class="div_test" id="div_test">测试div</div>
3有效
4.会不会是click事件没有冒泡到document上？于是再写一段测试代码：
- <script>
- document.addEventListener("click",function(e){
- alert(e.target.tagName)
- })
- </script>
- <div class="div_test">测试div</div>
点击div没有反应，无效。
5.可能是safari默认div不是一个可点击区域，而不支持click事件？于是我为div加上cursor属性
- .div_test{ cursor:pointer; }
能正常触发click事件，有效。成功在保留div和click事件下解决问题。