Question

我在同一个位置有两个按钮（一个在另一个位置，绝对位置）。我正在使用Jquery mobile 1.4和Phonegap 3.3。

按钮＃1最初为visible

按钮＃2最初是hidden

当我点击按钮＃1时，它应该隐藏按钮＃1并显示按钮＃2。

但奇怪的是，当点击按钮＃1时，它也会在按钮＃2上触发，就像它已经显示一样。因此，使用下面的代码，点击按钮＃1，隐藏按钮＃1，显示按钮＃2，隐藏按钮＃2并显示按钮＃1 ......回到我们开始的位置！

我做错了吗？

HTML：

      <a id="miniWeightLevel" class="ui-btn ui-btn-b ui-corner-all">My Factor</a>
            <div id="minifyCross">
                <div id="minifybutton" class="ui-btn btn-small-round ui-icon-delete ui-btn-b ui-btn-icon-notext ui-btn-inline"></div>
            </div>

JS：

$(document).on('pagebeforeshow', '#welcome-page', function(event, docdata){     
    //initial state : 
    $('#miniWeightLevel').hide();
    $('#minifyCross').show();

    //bindings :
    $('#miniWeightLevel').unbind('vclick').bind('vclick', function (e) {
        e.stopPropagation();
        $('#miniWeightLevel').hide();
        $('#minifyCross').show();
    });
    $('#minifyCross').unbind('vclick').bind('vclick', function (e) {
        e.stopPropagation();
        $('#miniWeightLevel').show();
        $('#minifyCross').hide();
    });
});

Answer 1

我过去也遇到过这种情况，vclick处理程序在移动设备上发射两次。您可以在return false处理程序的末尾添加vclick来解决此问题。

查看这些小提琴。第一个http://jsfiddle.net/8g8mmzey/2/与原始代码一致。在Chrome桌面上运行时，一切都很好。然而，当在iPhone上运行时，我可以看到这两个事件都会触发 - 当我点击＆＃39; x＆＃39;时，另一个按钮会暂时显示，但会触发其点击，隐藏它并显示＆＃ 39; X＆＃39;试。

第二个小提琴http://jsfiddle.net/ff23yL4u/在处理程序的末尾显示更新的代码return false。

$('#miniWeightLevel').unbind('vclick').bind('vclick', function (e) {        
    e.stopPropagation();
    $('#miniWeightLevel').hide();
    $('#minifyCross').show();

    return false;
});
$('#minifyCross').unbind('vclick').bind('vclick', function (e) {       
    e.stopPropagation();
    $('#miniWeightLevel').show();
    $('#minifyCross').hide();

    return false;
});

Answer 2

e.preventDefault（）工作的原因是stopPropagation用于确保事件不会冒泡链。例如。单击标记也会触发其父级的点击事件，然后触发其父级等.stopPropagation可防止这种情况发生。

preventDefault用于停止元素的正常操作，例如。链接上的单击处理程序中的preventDefault将停止跟踪链接，或者在提交按钮上将停止提交表单。

Answer 3

好的，我找到了解决方案。

而不是使用e.stopPropagation()只需使用：

e.preventDefault();

不确定原因，但这解决了我的问题。

点击显示的按钮会触发背景中的隐藏按钮事件

3 个答案: