点击显示的按钮会触发后台隐藏按钮的事件。

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();
    });
});

- Louis

---

按钮的HTML/CSS是什么？我的意思是如何最初隐藏一个按钮。 - AtanuCSE

@AtanuCSE 我刚刚编辑了问题，抱歉。我只是隐藏了一个并显示了另一个。HTML很基础。 - Louis

将 :visible 添加到按钮上，例如 $("#btnID:visible").on(。 - Omar

@Omar 谢谢，但是我在 $('#miniWeightLevel:visible').off('vclick').on('vclick'... 和 $('#minifyCross:visible').off('vclick').on('vclick'... 也遇到了同样的问题。 - Louis

你觉得在显示/隐藏逻辑中使用属性“disabled”怎么样？ - mika

Answer 1

我以前也遇到过这个问题，在移动设备上vclick处理程序会触发两次。您可以通过在vclick处理程序末尾添加return false来解决此问题。

查看这些fiddles。第一个http://jsfiddle.net/8g8mmzey/2/是使用原始代码，当在Chrome桌面上运行时一切正常。但是，在iPhone上运行时，我可以看到两个事件都被触发 - 当我点击“x”时，另一个按钮短暂显示，但随后触发其单击事件，隐藏它并再次显示“x”。

第二个fiddle 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;
});

- p e p

Answer 2

e.preventDefault() 能够生效的原因是使用了 stopPropagation 来确保事件不会冒泡到链上。例如，对 a 标签的点击也会触发其父元素、祖先元素等的点击事件。stopPropagation 可以防止这种情况发生。

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

- Nadeemmnn Mohd

Answer 3

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

不要使用 e.stopPropagation() ，改用：

e.preventDefault();

不知道为什么，但这解决了我的问题。

- Sergiu

---

@down-voter：我真的不明白你为什么要给我的答案点踩。我找到了一个对我有用的解决方案，并在这里展示了出来。它有什么问题吗？ - Sergiu