在點擊事件中使用stopPropagation

我在具有class「element」類的div中有一個錨點。在點擊事件中使用stopPropagation

<div class="element logout"> 
    <div class="subTop"> 
     <a href="home.jsp" onclick="return confirm('Do you want to logout?');">Log Out</a> 
    </div> 
</div>

我使用下面的代碼來處理註銷。

jQuery(".element").click(function(e){ 
    var tmpHref=jQuery(this).not('.logout').find(".subTop>a").attr('href'); 
    if(tmpHref!=undefined&&tmpHref!=""&&tmpHref!=null) 
    { 
     window.location.href=tmpHref; 
    } 
    else 
    { 
     jQuery(this).find(".subTop>a").click(); 
    } 
});

但我的問題是確認事件觸發一次又一次。我認爲這是因爲它的傳播。經過我的研究，我發現我可以使用this後的e.stopPropagation()。但我無法弄清楚如何在這裏使用它。

編輯消息'您要退出嗎？'在確認框是從數據庫中動態獲取的，所以我不能在代碼中對其進行硬編碼。

來源

2013-03-18 arjuncc

我認爲你想根據'div class'，'logout'或'not'來重定向你的頁面。如果'logout class'則是'logout.jsp'，如果div沒有'logout class'，那麼'home.jsp'。對？ – 2013-03-18 08:13:19

你有一個無限循環 - 在else子句中單擊（）。首先修改你的邏輯--e.stopPropagation（）或取消事件泡泡更糟糕的補丁 - 你的代碼應該足夠乾淨，可以在沒有某種惡意行爲的情況下正常退出。我確信這段代碼可以重新編寫得很乾淨 - 你能詳細說明你正在努力完成什麼嗎？ – 2013-03-18 08:16:04

這是基於幾乎沒有什麼我認爲你想要的假設。從評論和問題我明白，如果外部div doo snot具有註銷類或'logout.jsp'，如果用戶應該發送到'home.jsp'，則應將用戶發送到'home.jsp'。如果這是正確的，你可以cahnge HTML以

<div class="element logout"> 
    <div class="subTop"> 
    <a href="home.jsp" data-confirmmsg="Do you want to logout?" >Log Out</a> 
    </div> 
</div>

和JavaScript來

jQuery(".subTop>a").click(function(e){ 
    e.preventDefault(); 
}); 
jQuery(".element").click(function(e){ 
    var self = jQuery(this), 
     isLogout = self.hasClass('logout') 
     anchor = self.find(".subTop>a") 
     href = isLogout ? "logout.jsp" : anchor.attr('href'); 

    if(!isLogout || (isLogout && confirm(anchor.data('confirmmsg')))) 
    { 
     window.location.href=href; 
    } 
});

的JavaScript的第一部分僅僅關閉a - 標籤的鏈接。除了將事件傳播到外部元素之外沒有任何事情發生（如果點擊事實上在鏈接上，我們仍然會讓`div標籤處理它）。 JavaScript的第二部分首先檢查註銷類是否存在，並相應地設置href。最後，如果用戶被髮送到「logout.jsp」，則會顯示確認框並測試返回值。

來源

2013-03-18 09:02:28

您好先生，我尊重您的意見，但是，我在確認框中有dyanmic內容（來自數據庫）所以我不能硬編碼'你想要登出？'（我已經將它添加爲帖子中的編輯） – arjuncc 2013-03-18 09:05:43

@arjuncc你不需要，只需將消息作爲數據發送到a標籤即可。請參閱更新 – 2013-03-18 09:08:09

感謝它完美的工作。 – arjuncc 2013-03-18 09:16:20

嘗試

onclick="return confirm('Do you want to logout?');window.event.cancelBubble = true;"

onclick="javascript:event.stopPropagation();return confirm('Do you want to logout?');"

來源

2013-03-18 08:09:57

其工作，但沒有重定向到下一頁 – arjuncc 2013-03-18 08:40:14

您可以使用：

$('.subTop a').on('click', function (e) { 
    e.stopPropagation(); 
});

我雖與@ ink.robot同意，你的代碼應該按順序結構更合理以避免這種情況。

來源

2013-03-18 08:19:53

試試這個：

HTML：

<div class="element logout"> 
    <div class="subTop"> 
     <a href="home.jsp" class="testa" >Log Out</a> 
    </div> 
</div>

的jQuery：

jQuery(".element").click(function(e){ 
    e.preventDefault(); 
    if(confirm('Do you want to logout?')) 
    { 
     //console.log(jQuery(this).parents('.element'));return; 
     if(jQuery(this).hasClass('logout')) 
     {   
      window.location.href='logout.jsp'; 
     } 
     else 
     { 
      window.location.href='home.jsp'; 
     } 
    } 
});

測試小提琴：http://jsfiddle.net/e52QN/1/

來源

2013-03-18 08:23:49

對不起，我希望它在div的點擊事件工作 – arjuncc 2013-03-18 08:39:06

@arjuncc現在嘗試以上。 – 2013-03-18 08:47:37

你的代碼很好，但它不會解決我的問題。我在確認框中輸入了dyanmic內容（來自數據庫）。所以我不能硬編碼'你想註銷嗎？' – arjuncc 2013-03-18 08:56:50

在點擊事件中使用stopPropagation

回答

相關問題