问

javascript - jquery on 方法在safari上的兼容性

W布二发布于 2022-11-24 15:37

html



    
        test
        
        
        
        
        
        
    
    
        
            

                
                    
                        
                            
                        
                    
                    
                        
                            这是一个测试。。。
                            2月31日
                        
                    
                    其他信息。。。。。。，点击非图片区域的任何地方都会提转到某个指定的链接。
                
                
                    
                        
                            
                        
                    
                    
                        
                            这是一个测试。。。
                            2月31日
                        
                    
                    其他信息。。。。。。，点击非图片区域的任何地方都会提转到某个指定的链接。
                
                
                    
                        
                            
                        
                    
                    
                        
                            这是一个测试。。。
                            2月31日
                        
                    
                    其他信息。。。。。。，点击非图片区域的任何地方都会提转到某个指定的链接。
                
                
                    
                        
                            
                        
                    
                    
                        
                            这是一个测试。。。
                            2月31日
                        
                    
                    其他信息。。。。。。，点击非图片区域的任何地方都会提转到某个指定的链接。

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

5 个回答

没有时间实践，猜测有可能跟300ms有关，ios里点击事件会被浏览器阻止，然后300ms后浏览器再主动触发一个click，可能on写法跟主动触发的这个不兼容吧。。也许因为on是监听document的？触发的这个没冒泡?

2022-11-24 15:45 回答

249126059_a32331
这个标题，真的要经过认真的检测，不能简单地说是on在哪个浏览器上的兼容问题，这样很容易让人对什么技术，什么方法失去很大的信心的。

2022-11-24 15:45 回答

六九四四708
不是说ios没click么，要么元素手动加 click="" 给它个属性，要么监听元素的touch事件....

2022-11-24 15:45 回答

捕鱼达人2602917825
楼主你冤枉jQuery了。其实你只需要给你要设置的Dom设置css
```
cursor: pointer
```
2022-11-24 15:45 回答

henkoanna

再次更新，就LZ后来补充的需求而言，需要的是下面的方案。

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

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

由于touchend事件会触发两次：touchend一次以后，再次按屏幕上任意一个地方都会触发touchend(对双击操作的处理)。因此得在事件处理里面加入setTimeout。(参见这里)

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

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>test</title>
    <script type="text/javascript" src="res/jquery-1.10.2.js?1.2.1"></script>
    <style>a{margin: 1em;} span{background: #fFC;margin: 1em;}</style>
</head>
<body>
    <button id="new">new</button>
    <script type="text/javascript">
        $(document).on("touchend click",".appraisal",function(evt){
            if ( !this.classList.contains("touchmoving") ){

                var that = this ;
                setTimeout(function(){
                    // 防止第二次触发touchend
                    // 你的相应代码
                    alert(that.textContent) ;
                },0);
            } else {
                this.classList.remove("touchmoving") ;
            }
        });
        $(document).on("touchmove",".appraisal",function(){
            this.classList.add("touchmoving") ;
        });
        $("#new").on("click",function(){
            var a = document.createElement("span") ;
            a.classList.add("appraisal") ;
            a.textContent = Math.random() ;
            document.body.appendChild(a) ;
        }) ;
    </script>
</body>
</html>

可能性多了去了，为何一定会是是jQuery.on的兼容性问题呢，自己的说法验过了吗？

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

1

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

2

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

在ipad2 + iOs7 + safari/chrome + jQuery1.10.2上测试通过（jsFiddle在这里特别慢，所以贴了全部的代码，见谅）：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>test</title>
    <script type="text/javascript" src="res/jquery-1.10.2.js?1.2.1"></script>
    <style>a{margin: 1em;}</style>
</head>
<body>
    <button id="new">new</button>
    <script type="text/javascript">
        $(document).on("click",".appraisal",function(){
             alert(this.textContent) ;
        });
        $("#new").on("click",function(){
            var a = document.createElement("a") ;
            a.classList.add("appraisal") ;
            a.href= "#" ;
            a.textContent = Math.random() ;
            document.body.appendChild(a) ;
        }) ;
    </script>
</body>
</html>

参考

kejun：测试touch事件
apple的相关事件API

2022-11-24 15:45 回答

手机用户2502894247

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签