jQuery在iPhone（触摸设备）上的点击事件无效

Question

有人能解释一下为什么这在浏览器上运行正常，但在像苹果 iPhone 这样的移动设备上不起作用吗？在 iPhone 上，我从警报中永远不会得到 hello。为什么？

<div class="close">
  Click here
</div>

JS：

$(document).on('click', '.close', function() {
  alert('hello');
});

这里是示例: https://jsfiddle.net/27ezjrqr/5/

- caramba

Answer 1

默认情况下，div不是可点击的元素。但添加 cursor: pointer; 可使iOS将其视为可点击的。

所以你只需要添加

.close {
    cursor: pointer;
}

将此代码添加到您的CSS中，它就会起作用。

证明在此处：https://jsfiddle.net/27ezjrqr/6/

$(document).on('click', '.close', function() {
  alert('hello');
});

.close {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="close">
  Click here
</div>

- Gavin

---

我不敢相信，但是你是正确的！谢谢，确实有效！ - caramba

我还是想知道为什么会出现这种奇怪的行为。所以如果没有其他答案的话，我会等一段时间再决定是否接受... - caramba

据我所了解，div元素默认情况下不是“可点击”的元素，因此iOS不会将其视为可点击的元素。添加光标/指针可以使它们成为可点击的项目。 - Gavin

谢谢您的更新！现在这个问题变得非常容易理解了，如果从这个角度考虑，它确实是有意义的！谢谢。 - caramba

这太棒了，你用这个节省了我们两天的努力。 - Shivananda Chary

Answer 2

我使用了touchstart事件和click事件，这对我很有效。

 $(document).on("click touchstart tap", "#button_X", function (){
//your code here      
 });

- Lord Bolton

---

你说的和@dannyjolie在将近两年前说的一样：https://dev59.com/6lsV5IYBdhLWcg3wrAVJ#35946223。同时，注意不要使用`touchstart`和`tap`，否则函数可能会触发两次... - caramba

同时，使用touchstart时要小心，因为即使用户正在滚动（而不是有意点击），它也会触发。 - Lauren

Answer 3

iOS 7.0.3版本已修复了Javascript alert()和其他更多的错误。

- acardoso

---

嗨，acardoso，感谢您的回答。为什么这个 https://jsfiddle.net/vvsq2gw1/ 在 iPhone 上可以工作，而问题中的示例却不能？ - caramba

我猜测与点击事件有关。 - acardoso

Answer 4

在iOS上，点击事件的效果与预期不同。您可以使用类似于touchstart的东西，或者使用奇怪的iOS特性：在您的CSS中设置.close{cursor:pointer}。

- dannyjolie