Question

我们有一个Web应用程序，它使用Jquery blockUI来打开弹出窗口并执行一些操作。所有这一切在Safari上运行良好，IE 8问题在于Ipad。弹出窗口中的所有操作都没有响应。它只停留在那个页面上。即便关闭也行不通。我们需要添加其他东西吗？这是打开页面并单击事件以进行关闭的代码。

<script>
$(document).ready(function() {
  $.ajaxSetup( {
           cache:false
   });

        $("#sendInviteDiv").load("invite.htm?action=view&pid="+pid);
            $.blockUI({ message: $('#sendInviteDiv'),
                centerY: 0,
                    css: {
                top:  ($(window).height() - 550) /2 + 'px',
                        left: ($(window).width() - 870) /2 + 'px',
                        width: '870px'
                }
            });
            //var ua = navigator.userAgent;
            //var event = (ua.match(/iPad/i)) ? "touchstart" : "click";
            //alert(ua);

            $('#closeInvite').click($.unblockUI);

    $('#inviteBtn').click(function() {
//script to load 
       //setPositionDetails('${formName}','inviteBtn');

       });
}


});


</script>

欣赏指针。

启用了javascript，并在Ipad Safari设置中允许弹出窗口。

Answer 1

我通常使用

.bind("click touchstart", function(){

});

而不是：

.click(function(){

});

这样你就可以绑定正确的事件了。它也更快，由于某种原因，触摸响应速度比点击快得多。

Answer 2

我知道这是很久以前的问题，但我在寻找这个问题时找到了答案。

有两种解决方案。

您可以在html元素上设置空的onlick属性：

<div class="clickElement" onclick=""></div>

或者你可以通过设置指针光标在css中添加它：

.clickElement { cursor:pointer }

问题是在ipad上，第一次点击非锚元素会注册为悬停。这不是一个真正的错误，因为它有助于那些没有平板/移动优化的悬停菜单的网站。设置光标或添加一个空的onclick属性会告诉浏览器该元素确实是一个可点击的区域。

（通过http://www.mitch-solutions.com/blog/17-ipad-jquery-live-click-events-not-working）

Answer 3

更新：我将.bind切换为.on，因为它现在是jQuery的首选方式。

从jQuery 1.7开始，.on()方法是将事件处理程序附加到文档的首选方法。 jquery.com

示例：

$('.button').on("click touchstart", function() {

});

以下是click和touchstart事件的最终版本，因为即使在加载DOM之后添加的新DOM对象，它仍然会触发。为任何场景添加此终极点击事件解决方案。

$(document).on("click touchstart", ".button", function () {

});

Answer 4

请改用bind功能。让它更友好。

示例：

var clickHandler = "click";

if('ontouchstart' in document.documentElement){
    clickHandler = "touchstart";
}

$(".button").bind(clickHandler,function(){
    alert('Visible on touch and non-touch enabled devices');
});

Answer 5

感谢以前的评论者，我发现以下所有内容对我有用：

向元素添加onclick存根

onclick="void(0);"

或使用光标指针样式

style="cursor:pointer;"

或在我现有的代码中，我的jquery代码需要点击添加

$(document).on('click tap','.ciAddLike',function(event)
{
    alert('like added!'); // stopped working in ios safari until tap added
});

我正在为感兴趣的人添加交叉引用回Apple Docs。见Apple Docs:Making Events Clickable

（我不确定我的混合应用程序何时停止处理点击，但我似乎记得他们在iOS 7及更早版本中工作过。）

Answer 6

实际上，这已经证明代码中有几个javascript更改。调用javascript方法;在末尾。将脚本标签放在正文而不是头部。并且有趣的是甚至将显示的文本（请“点击”）更改为非事件。所以请评价等。

在safari上调试调试器，它有时没有提供太多信息甚至错误。

Answer 7

可能不是定义事件点击和触摸，你可以定义一个处理程序，看看设备是否可以点击或触摸。

var handleClick= 'ontouchstart' in document.documentElement ? 'touchstart': 'click';
$(document).on(handleClick,'.button',function(){
alert('Click is now working with touch and click both');
});

Answer 8

我们遇到了类似的问题：只要用户没有滚动页面，按钮上的click事件就不起作用。该错误仅出现在iOS上。

我们通过滚动页面来解决它：

$('#modal-window').animate({scrollTop:$("#next-page-button-anchor").offset().top}, 500);

（但它并没有回答最终的原因。也许Safari移动设备中存在某种错误？）

Answer 9

我有一个可以创建弹出窗口的跨度。如果我使用“click touchstart”，它会在touchend期间触发部分弹出窗口。我通过使跨度“点击touchend”来解决这个问题。

Answer 10

我发现当我使绑定更具体时，它开始在iOS上运行。我有：

$("div.content").on('click tap', 'span.clickable', function(e){ ... });

当我将其更改为：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="vertical">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    android:background="?android:attr/colorPrimary"
    app:popupTheme="@style/AppTheme.PopupOverlay" />

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent" android:layout_height="0dp"
    android:layout_weight="1"
    android:background="@color/list_background" />

<TextView
    android:layout_width="match_parent" android:layout_height="48dp"
    android:text="@string/empty"/>
     <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:layout_marginTop="10dp"
        android:textColorHint="@android:color/white"
        android:textColor="@android:color/white"
        android:hint="@string/loginEmailHint"
        android:id="@+id/loginEmail"
        android:visibility="gone"/>

</LinearLayout>


Here a an example

iOS开始响应。

Answer 11

没有一个支持我的解决方案。这是最终有效的方法：

如果准备好文档时不需要xs:dateTime('2018-04-02 09:05:30')中的代码，则将其移出。如果必须将其准备在文档中，则可以将关键代码移至$(document).ready。

Jquery点击不使用ipad

11 个答案: