防止事件冒泡（對於javascript onclick事件）

我正在使用javascript與CMS進行交互，該CMS爲用戶提供了一個按鈕，以便將事物添加到他們的購物籃中。但是，我使用JavaScript來嘗試阻止客戶這樣做，除非他們已從頁面上其他位置的下拉菜單中進行選擇。因爲有很多不同的按鈕可能會讓他們進入籃子（包括下面的例子），並且所有這些按鈕都有不同的方法來做這件事，而不是寫很多行代碼來阻止每種方法，在做出選擇時啓用該方法我正試圖做一種'全部抓住'的修復，我只是覆蓋任何這樣的按鈕/鏈接與另一個div，以便有效'掩飾'下面的按鈕，直到他們做出決定。防止事件冒泡（對於javascript onclick事件）

我第一次嘗試使用絕對定位的div來做到這一點，它運行的很好，直到用戶做了一些事情，比如重新調整頁面上的文本框的大小，然後突然間我絕對定位的div就出現在錯誤的地方！

所以我現在正在使用JQuery的.wrap（），它很好地解決了這個問題..但是..現在我不能使用z-index來定位div所需的按鈕之上，因爲這些按鈕是在掩碼內在它下面！

我已經做了很多關於事件冒泡的閱讀，但是我不確定我是否還沒有找到正確的信息，或者我是否正確地理解了它，或者事件冒泡將我帶到了錯誤的路上因爲我似乎無法理解這些概念並將其應用於此場景。

所以.....給出下面的HTML結構

：其中帶class = 「btnMask」的股利是由我的JavaScript添加

<div class="btnMask"> 
    <div class="button"> 
     <a onclick="pageSubmit();return false;" href="#" id="addToBasket"> 
      <span>Add to Basket</span> 
     </a> 
    </div> 
</div>

加上以下的JQuery：

$('.btnMask').click(function() { 
    // prevent default actions and alert the customer to select something; 
});

如何去點擊.btnMask DIV時停止代碼觸發？和（如果答案不能讓我的其他問題的答案顯而易見...）我將如何切換打開和關閉？（我有一個函數，檢查下拉的變化，並將z-index設置爲99/-99，所以我想改變它以結合這種新方法。）

在此先感謝您的幫助。

< <編輯>>

使用最初的答案，這樣我設法解決使用常規的HREF帶你離開該頁面鏈接的問題。

所以我現在有固定的聯繫，其中HTML是這樣的：

<div class="btnMask"> 
    <div class="button"> 
     <a id="nextPage" href="/link/toanotherpage.asp?id=667868465726122926234"> 
      <span>Click to go to Page 2</span> 
     </a> 
    </div> 
</div>

但是，就像我說的有很多方法被用來把人離開了該網頁，並與e.preventDefault （）;和e.stopPropagation（）;不適用於我的原始示例（大概是因爲它們使用onclick而不是href？）。

有沒有辦法做同樣的事情e.preventDefault（）;和e.stopPropagation（）;正在做我的.btnMask股利，但也將處理包含的鏈接正在觸發一個onclick？

感謝

< <編輯>>

更新了問題的標題，以反映準確的問題，而不僅僅是事件冒泡定期聯繫。

來源

2013-04-08 Duck in Custard

$('.btnMask').click(function(e) { 
    e.stopPropagation(); 
});

來源

2013-04-08 10:32:57 alexP

這就是我想，但補充說，似乎並沒有爲我工作...。點擊處理程序是這樣的： $（「 btnMask」）點擊（函數（E）{ e.stopPropagation（） ; displayMsg（）; }）; 應該停止點擊鏈接但激發我的displayMsg功能？ – 2013-04-08 10:54:27

如果要防止事件冒泡並取消默認操作，則可以從事件處理函數返回false。

$('.btnMask').click(function() { 
    return false; 
});

或者使用preventDefault和stopPropagation

$('.btnMask').click(function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
});

來源

2013-04-08 10:35:18

這就是我想的，但補充說，似乎並沒有爲我工作... .click處理程序看起來像這樣：$（'。btnMask'）。click（function（）{displayMsg（）; return false;}）;應該停止鏈接被點擊，但激發我的displayMsg功能？ – 2013-04-08 10:55:47

你的onclick處理程序是你的jQuery單擊處理之前觸發。你可以做這樣的事情

function pageSubmit() { 
     alert('pageSubmit'); 
    } 
    var link = document.getElementById('addToBasket'); 
    var linkClickHandler = link.onclick; 
    link.onclick = null; 
    $('.button').data('linkClickHandler', linkClickHandler); 

    $('.button').on('click', function(e){ 
     var clickHandler = $(this).data('linkClickHandler'); 
     var link = $(this).find('a').get(0); 
     clickHandler.apply(link, [e]); 
    }); 

    $('.btnMask').on('click', function(e){ 
     if (!$(this).hasClass('test')) { 
      e.preventDefault(); 
      e.stopPropagation(); 
     } 
    });

和HTML作爲

<div class="button"> 
    <a onclick="pageSubmit();return false;" href="#" id="addToBasket"> 
     <div class="btnMask test"> 
      <span>Add to Basket</span> 
     </div> 
    </a> 
</div>

如果你刪除類測試從btnMask div的，pageSubmit處理程序將不會被調用，當它存在的處理程序是調用。

來源

2013-04-08 12:03:30

防止事件冒泡（對於javascript onclick事件）

回答

相關問題