it_leaner 2017-11-16 10:51 采纳率: 0%
浏览 4623

safari移动端网页点击事件无效

#首次点击时，没有执行点击事件，而是虚拟键盘弹了下去(https://img-ask.csdn.net/upload/201711/16/1510829072_766726.jpg)
虚拟键盘弹下去之后，再次点击按钮，才能触发事件(https://img-ask.csdn.net/upload/201711/16/1510829140_145204.jpg)
这个页面可以上下滑动，滑动后，浏览器自带的下方工具栏隐藏，此时，点击按钮时，不会触发事件，而是下方工具栏显示出来](http://himg.ask.csdn.net/upload/201711/16/1510829210_863601.jpg)
在下方工具栏存在的前提下，按钮事件才会生效(https://img-ask.csdn.net/upload/201711/16/1510829357_930238.jpg)
账号里没有C币啊，谢谢大家了

  • 写回答

1条回答 默认 最新

  • qq_40250105 2018-04-17 03:09
    关注

    可以使用以下代码测试

    <!DOCTYPE html>




    iOS click bug test
    <style>
    .container {
    }

    .target {
        display: block;
        text-align: center;
        margin: 100px 30px 0;
        padding: 10px 0;
        border: 1px solid #ccc;
    }
</style>




    Click Me! 

    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
    // 或者 $(document).on('click', ....)
    $('body').on('click', '.target', function (e) {
        alert('click');
    });
</script>



    解决方法
    ​将 click 事件直接绑定到目标​元素（​​即 .target）上
    将目标​元素换成 或者 button 等可点击的​元素
    ​将 click 事件委托到​​​​​非 document 或 body 的​​父级元素上
    ​给​目标元素加一条样式规则 cursor: pointer;

    ​推荐后两种。从解决办法来看，​推测在 safari 中，不可点击的元素的点击事件不会冒泡到父级元素。通过添加 cursor: pointer 使得元素变成了可点击的了。

    评论

报告相同问题？

悬赏问题

  • ¥15 关于#python#的问题：求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 LiBeAs的带隙等于0.997eV,计算阴离子的N和P
  • ¥15 关于#windows#的问题：怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
  • ¥15 来真人，不要ai！matlab有关常微分方程的问题求解决，
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab，jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿
  • ¥15 回答4f系统的像差计算