iOS 将 javascript 函数绑定到点击 <html>答案

【问题标题】：iOS bind javascript function to clicking on <html>iOS 将 javascript 函数绑定到点击 <html>
【发布时间】：2012-03-01 06:55:18
【问题描述】：

这适用于桌面 safari，但在 iOS 版本中不会弹出警报。是否可以绑定到 iOS 中的“html”元素？每当用户单击页面上的其他位置时，我想关闭一个下拉菜单。

$('html').bind("click", function(){alert("clicked!")})

编辑

由于 jsfiddle 嵌入在 iframe 中，因此将其发布为 html，这显然解决了我的问题。在桌面 safari 上打开此页面可以正常工作，但在 iOS 模拟器中单击时不会显示任何内容。

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(document).ready(function(){  
        $('html, body').bind("click", function(){alert("html or body")})
        $(document).bind("click", function(){alert("document")})
      });
    </script>
  <body>
  </body>
</html>

编辑 2

这对我在 iOS 模拟器或我的 iPhone 上也不起作用。如果我将 delegate() 放在我的应用程序中并单击链接，我确实会收到警报。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<body>
</body>
<script type="text/javascript">
  $(document).delegate('html, body', "click", function(){alert("html or body")});
</script>
</html>

编辑 3

这行得通！

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<body>
  <div id="stuff">applesauce</div>
  <div>other stuff</div>
</body>
<script type="text/javascript">
  $(':not[#stuff]').on( "click", function(){alert("not stuff")});
</script>
</html>

【问题讨论】：

你试过用 $('body') 代替吗？
为什么要使用 $('body') 代替？有没有地方说要听身体的参考？
我没有任何参考资料，但每个设备处理 javascript 的方式略有不同，因此 iOS 使用 $('html') 的方式可能有所不同。
我刚刚查看了 jquery 代码code.jquery.com/jquery-1.7.1.js 并在初始化中发现了这个，if (selector === "body" && !context && document.body) {...}。 “html”没有类似的东西，所以我假设他们会将该部分留给设备，而不是像处理正文那样手动处理它。
如果这是一个 jQuery 问题，我会感到惊讶，并且您链接到的代码部分似乎只是对选择器的优化。

标签： javascript jquery html ios

【解决方案1】：

jQuery.click() 在 iOS 上无法正常运行。我怀疑您在使用 bind() 时遇到了同样的问题。然而 jQuery.delegate() 确实有效。

$('html').delegate('body', 'click', function(){ alert("body"); });

应该适合你。大概 on() 也会起作用，但我还没有机会尝试它。

顺便说一句，您应该将该脚本块移到 body 标记下方并丢失 $(document).ready()。

更新： 在任何最近的 jQuery 中，on(event, selector, function) 都是可行的方法。它适用于 IOS 并防止泄漏事件处理程序。

$('body').on('click', ':not[#stuff]', function(){ alert("not stuff"); });

【讨论】：

我面前没有 iPad，所以无法查看。但我认为目标也很重要。试试我上面的编辑。
如果您试图捕捉页面上的任何点击，这可能不起作用。由于触摸界面，Safari 会做一些奇怪的事情来解释你的手指实际在做什么。当我需要能够在单击离开时关闭元素时，我使用了“未显示元素”的选择器而不是正文，这工作正常。
没有骰子。我尝试了 $('html').on('click', 'body', ...) 也无济于事（在桌面上工作，所以我认为我做对了）。有什么地方可以让我了解这些 iOS 问题吗？
酷。为了完整起见，我可能还应该注意，在事件处理程序中，您必须检查 parent(elementSelector) 是否也返回一个空集。因为点击弹出窗口内的 DOM 元素也会触发“点击”。
jQuery 在过去的 18 个月里有了很大的发展。让我调整一下答案

【解决方案2】：

使用document 或body 元素代替html

    $(document).bind("click", function(){
          alert("clicked!")
    });

你也可以试试这个。

    $('html, body').bind("click", function(){
          alert("clicked!")
    });

【讨论】：