javascript - Jquery Mobile "tap"事件错误

Question

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

一次触摸将在同一运动中触发不同对象的不同事件

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 中已被弃用，但这是我的旧示例。