點擊顯示的按鈕觸發背景中的隱藏按鈕事件

我有兩個按鈕在相同的位置（一個在另一個絕對位置）。我正在使用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(); 
    }); 
});

來源

2014-06-18 Louis

什麼是按鈕html/css？我的意思是你最初如何隱藏一個按鈕。 – AtanuCSE

@AtanuCSE我只是編輯問題抱歉。我只隱藏（）一個並顯示（）另一個。 Html是基本的。 – Louis

將'：visible'加入按鈕，例如'（'＃btnID：visible「）。on（'。 – Omar

我碰到這在過去爲好，用vclick處理器在移動設備上發射兩次。您可以通過在vclick處理程序的末尾添加一個return false來解決此問題。

看看這些小提琴。這第一個，http://jsfiddle.net/8g8mmzey/2/，與您的原始代碼。在Chrome桌面上運行時一切正常。然而，在iPhone上運行時，我可以看到兩個事件都被觸發 - 當我點擊'x'時，另一個按鈕隨即顯示，但是它的點擊被觸發，隱藏並再次顯示'x'。

第二個小提琴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; 
});

來源

2015-02-12 15:20:15

不介意沒有理由downvoters ...從我+1。 –

-1

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

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

e.preventDefault();

不知道爲什麼，但是這解決了我的問題。

來源

2015-02-13 17:10:53 Sergiu

@ down-voter：我真的不明白你爲什麼投下我的答案。我找到了適合我的解決方案，並在這裏介紹。它有什麼問題？ – Sergiu

e.preventDefault（）的工作原因是，stopPropagation用於確保事件不會冒泡鏈。例如。點擊標籤也會觸發其父母，然後是其父母等點擊事件。stopPropagation可以防止發生這種情況。

preventDefault用於停止元素的正常動作，例如，在鏈接的點擊處理程序中的preventDefault會停止正在執行的鏈接，或者在提交按鈕上停止正在提交的表單。

來源

2015-02-13 20:18:03

點擊顯示的按鈕觸發背景中的隱藏按鈕事件

回答

相關問題