Jquery Mobile“点击”事件错误

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