javascript - Jquery Mobile "tap"事件错误

Question

注意***:必须在平板电脑上测试，我只在Ipad上测试过

在同一运动中，1次触摸将触发不同物体的不同事件

http://jsfiddle.net/wR6dK/1/

HTML:

<div id="box1"></div>
<div id="box2"></div>

JS:

$("#box1").on('tap',function(){
    $("#log").append('box1 clicked <br>');
    $(this).fadeOut(0);
});

$("#box2").on('tap',function(){
    $("#log").append('box2 clicked <br>');
    $(this).fadeOut(0);
});

这种情况下，绿色框被隐藏...它可以移动或重新排列 z-index，所有这些都会通过一次触摸触发红色框的事件

是这样的吗？ “vclick”和其他事件也会发生这种情况吗？

这是一个错误吗？

Answer 1

这是最古老的 JavaScript 错误之一，从未修复过，因为很长一段时间都不知道。简而言之，JavaScript 从来就不是为了这样使用的，但是给人类一个工具，他会根据需要调整它，因此我们有了像 jQuery 和 jQuery Mobile 这样的框架。

这也称为坠落事件。可以通过以下功能来防止这种情况:

• stopPropagation()
• stopImmediatePropagation()

并返回 false。

这是为使用此解决方案而修改的示例:http://jsfiddle.net/Gajotres/wR6dK/5/

$("#box1").on('tap',function(e){
    $("#log").append('box1 clicked <br>');
    $(this).fadeOut(0);
    e.stopPropagation();   
    return false;    
});

$("#box2").on('tap',function(e){
    $("#log").append('box2 clicked <br>');
    $(this).fadeOut(0);
    e.stopPropagation();   
    return false;    
});

让我向您展示另一个示例，以便您在 jQuery Mobile 的情况下了解此问题:http://jsfiddle.net/Gajotres/Xz2np/

$('#page1').live('pagebeforeshow',function(e,data){
    $('.someDiv').live('click', function (e) {   
        alert('Event is not going to propagate to content div, thus not hiding a header');             
        event.stopPropagation();   
        event.stopImmediatePropagation();
    });
});

要理解这个问题，只需单击 DIV 示例，然后注释这两行，再次运行示例，然后再次单击 DIV。我知道 live 在 jQuery 1.9 中已被弃用，但这是我的旧示例。