jQuery中的mousedown/mouseup事件在iPad上是否有效？

Question

我正在使用当前的代码：

$('body').mousedown(function() {
        $('div#extras').fadeTo('fast', 1);
});

$('body').mouseup(function() {
        $('div#extras').delay(2000).fadeTo(1500, 0);
});

在 Safari 中运行良好，但当我将它上传并在 iPad 上查看时，它就不能工作了？

- Annie

Answer 1

我发现对于那些感兴趣的人，我可以为iPad做这件事情：

你将使用与我的问题不同的代码：

$('body').bind( "touchstart", function(e){
        $('div#extras').fadeTo('fast', 1);
});

&

$('body').bind( "touchend", function(e){
        $('div#extras').delay(2000).fadeTo(1500, 0);
});

- Annie

---

$('body').on("mousedown touchstart", function(e){ // 这段代码可以同时在桌面和移动设备上工作 }) - Denis

只是想补充一下，在使用覆盖层/模态弹出窗口时不要忘记使用 e.preventDefault()。 - Arshad

Answer 2

并不完全是这样。 Apple文档中引用了以下内容：

可点击元素包括链接、表单元素、图像映射区域或任何带有mousemove、mousedown、mouseup或onclick处理程序的元素。可滚动元素是具有适当溢出样式、文本区域和可滚动iframe元素的任何元素。由于这些差异，您可能需要将某些元素更改为可点击元素，如“使元素可点击”中所述，以在iPhone OS中获得所需的行为。

（强调是我的）

- scunliffe

---

嗯，我不确定那个，但在我的iPad上它完美地工作。 :) - Annie

Answer 3

虽然这是一篇旧帖子，但有一个通用的解决方案：

$('body').on('mousedown touchstart',function(e){
    $('div#extras').fadeTo('fast', 1);
});
$('body').on('mouseup touchend',function(e){
    $('div#extras').delay(2000).fadeTo(1500, 0);
});

您会注意到我在移动端和桌面端都使用了mousedown与touchstart以及mouseup与touchend。这样可以覆盖所有设备的使用。

- Ivijan Stefan Stipić

Answer 4

虽然不是回答你的问题，但对于那些只是在寻找“iPad上的jQuery mousedown/mouseup”的人可能会很有用。

我经常使用这个小技巧：

$(element).hover(function() {
   // Do something
});

当在 iPad 上使用触摸时，此功能会触发，并且在点击元素之外时会反转操作，因为它是一个悬停事件。例如：

// Assuming the element has 'opacity: 0' in CSS

$(element).hover(function() {
   $(this).animate({'opacity': 1}, 200);
});

创建一个“单击”淡入效果和“鼠标弹起”淡出效果。

- Jeffrey Roosendaal