jquery on 方法在safari上的兼容性 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

jquery on 方法在safari上的兼容性

2016-06-14 17:42:58 3170 1
<!DOCTYPE>
<html>
    <head>
        <title>test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
        <meta content="telephone=no" name="format-detection" />
        <style type="text/css">
            ul, li{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
                max-width: 600px;
            }
            li{
                margin: 10px;
                border: 1px solid blue;
            }
            img{
                width: 200px;
                border: none;
            }
            div.appraisal-intro{
                font-size: 20px;
                margin: 20px 0;
                padding: 20px 0;
            }
        </style>
    </head>
    <body>
        <div class="main main-bg">
            <ul class="appraisals-list">
                <li class="appraisal">
                    <div>
                        <a class="appraisal-link"  href="http://www.baidu.com" title="baidu">
                            <img class="appraisal-img" src="http://t0.gstatic.com/images?q=tbn:ANd9GcQHoxyhSNPHirv6vS72cfWLYRCqSGDLdnGuMmDr76WD8wjaMWeA" alt="图片测试" />
                        </a>
                    </div>
                    <div class="appraisal-intro">
                        <a class="topic-link" href="http://bing.com">
                            <span class="appraisal-title">这是一个测试。。。</span>
                            <span class="date">2月31日</span>
                        </a>
                    </div>
                    <p>其他信息。。。。。。,点击非图片区域的任何地方都会提转到某个指定的链接。</p>
                </li>
                <li class="appraisal">
                    <div>
                        <a class="appraisal-link"  href="http://www.baidu.com" title="baidu">
                            <img class="appraisal-img" src="http://t0.gstatic.com/images?q=tbn:ANd9GcQHoxyhSNPHirv6vS72cfWLYRCqSGDLdnGuMmDr76WD8wjaMWeA" alt="图片测试" />
                        </a>
                    </div>
                    <div class="appraisal-intro">
                        <a class="topic-link" href="http://bing.com">
                            <span class="appraisal-title">这是一个测试。。。</span>
                            <span class="date">2月31日</span>
                        </a>
                    </div>
                    <p>其他信息。。。。。。,点击非图片区域的任何地方都会提转到某个指定的链接。</p>
                </li>
                <li class="appraisal">
                    <div>
                        <a class="appraisal-link"  href="http://www.baidu.com" title="baidu">
                            <img class="appraisal-img" src="http://t0.gstatic.com/images?q=tbn:ANd9GcQHoxyhSNPHirv6vS72cfWLYRCqSGDLdnGuMmDr76WD8wjaMWeA" alt="图片测试" />
                        </a>
                    </div>
                    <div class="appraisal-intro">
                        <a class="topic-link" href="http://bing.com">
                            <span class="appraisal-title">这是一个测试。。。</span>
                            <span class="date">2月31日</span>
                        </a>
                    </div>
                    <p>其他信息。。。。。。,点击非图片区域的任何地方都会提转到某个指定的链接。</p>
                </li>
                <li class="appraisal">
                    <div>
                        <a class="appraisal-link"  href="http://www.baidu.com" title="baidu">
                            <img class="appraisal-img" src="http://t0.gstatic.com/images?q=tbn:ANd9GcQHoxyhSNPHirv6vS72cfWLYRCqSGDLdnGuMmDr76WD8wjaMWeA" alt="图片测试" />
                        </a>
                    </div>
                    <div class="appraisal-intro">
                        <a class="topic-link" href="http://bing.com">
                            <span class="appraisal-title">这是一个测试。。。</span>
                            <span class="date">2月31日</span>
                        </a>
                    </div>
                    <p>其他信息。。。。。。,点击非图片区域的任何地方都会提转到某个指定的链接。</p>
                </li>
            </ul>
        </div>
        <script type="text/javascript" src="jquery-1.8.1.min.js"></script>
        <script type='text/javascript'>
            /**
             * 模拟链接跳转
             * @param {string} class_name 要执行跳转的元素类名
             * @returns {string} link 最终指定跳转地址的a标签的类名
             */
            function jumpToDetail(obj, class_name, link){
                var link_area = null;
                var className = $(obj).attr("class");
                className = className.split(' ');
                var classNameLen = className.length;
                for (var i = 0; i < classNameLen; i ++){
                    if (className[i] == class_name){
                        link_area = $(obj);
                        break;
                    }
                }
                if (! obj){
                    link_area = $(obj).parents("."+class_name);
                    if (! link_area.length){
                        return ;
                    }
                }
                window.location = link_area.find("."+link).attr('href');
            }

            /*
             * 阻止事件
             */
            function stopEvent(e){
                e = e || window.event;
                if(e.preventDefault) {
                  e.preventDefault();
                  e.stopPropagation();
                }else{
                  e.returnValue = false;
                  e.cancelBubble = true;
                }
            }
            $(document).ready(function(event){
                var body = $("body");
                body.on("click", ".appraisal", function(event){
                    alert("click not on image");
                    jumpToDetail(this, 'appraisal', 'topic-link');
                    stopEvent(event);
                });
                // cancel the default action of a element
                body.on("click", ".appraisal-link", function(event){
                    alert("click on image");
                    jumpToDetail(this, 'appraisal', 'appraisal-link');
                    stopEvent(event);
                });
                body.on("click", ".topic-link", function(event){
                    alert("click not on image");
                    jumpToDetail(this, 'appraisal', 'topic-link');
                    stopEvent(event);
                });
            });
        </script>
    </body>
</html>

上面这段代码在safari下,on方法似乎,无论你怎么点都没有作用。有经验的同志们,可否指点一二? 我需要给动态生成的元素也绑定这个点击事件。

取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:38:23

    如果jumpToDetail是一个弹窗之类必须要有JS介入的东西,而.appraisal可能本身不提供click事件(比如span标签),那么,可以用touchend click做代替。

    要防止滑动的时候不误触发,可以学习这里去除onclick的300ms延时的方式,使用一种方式缓存在touch过程中是否发生了touchmove。

    在ipad2 + iOs7 + safari/chrome + jQuery1.10.2上测试通过:
    screenshot
    可能性多了去了,为何一定会是是jQuery.on的兼容性问题呢,自己的说法验过了吗?

    我不知道.appraisal是什么,不知道你的jQuery版本和iPhone版本……前端里,兼容性这种东西是步步惊心,根据LZ提供的上下文,很难说什么东西更致命,只能靠猜,因而没办法帮到具体的忙了。

    1

    如果jumpToDetail是跳转到页面里面本身存在的内容区域里,而.appraisal是一个链接,那么有一个更加简单的做法,是,然后给相应的元素赋以ID。

    2

    如果jumpToDetail是一个弹窗之类必须要有JS介入的东西,而.appraisal是一个a标签,那么,增加它的href属性,它就可以有click事件,也会冒泡到document上。

    在ipad2 + iOs7 + safari/chrome + jQuery1.10.2上测试通过

    参考
    •kejun:测试touch事件
    •apple的相关事件API

    0 0
相关问答

1

回答

PostgreSQL同步至RDS PostgreSQL中目标已存在表的处理模式的说明是什么?

2021-12-13 12:08:25 74浏览量 回答数 1

0

回答

python scrapy 多个不同的页面数据组合,管道被调用多次,导致字典报错?400报错

2020-06-08 11:05:53 636浏览量 回答数 0

0

回答

如何根据条件使用jQuery或PHP来闪烁表行?

2019-09-29 18:17:02 229浏览量 回答数 0

0

回答

如何根据条件使用jQuery或PHP来闪烁表行?

2019-09-29 18:25:56 226浏览量 回答数 0

1

回答

Postgresql数据库(9.6版本),普通账户查询pg_stat_activity无法看到query内容

2019-04-25 15:18:05 1204浏览量 回答数 1

1

回答

jquery blockui 插件的使用问题

2016-07-14 14:38:41 1799浏览量 回答数 1

1

回答

jQuery兼容性问题

2016-07-05 10:23:29 1676浏览量 回答数 1

1

回答

jquery问题求大神指点

2016-06-02 18:28:26 1725浏览量 回答数 1

1

回答

spring rmi (no security manager: RMI class loader disabled)

2016-03-18 09:31:58 3808浏览量 回答数 1

1

回答

网页中的SVG元素无法绑定jQuery事件?

2016-03-13 18:09:33 2929浏览量 回答数 1
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载