暫時禁用所有onclick事件並將其綁定回

如何禁用頁面上的所有onclick事件，綁定我的自定義函數，並在執行後啓用所有先前的事件？暫時禁用所有onclick事件並將其綁定回

我正在建立一個書籤，它應該可以在任何已經加載的頁面上工作，並且我正在使用jQuery來處理我的自定義邏輯（頁面在加載後被加載）。請注意，我無法控制哪些事件以及何時被綁定。

目前我發現的最穩定的解決方案是解除綁定事件，通過自定義函數綁定阻止默認操作，然後重新加載頁面。這工作，但我想避免重新加載。部分解決方法是重新加載頁面並滾動到以前的位置（如何實現此效果？）。一些可能的解決方案會使用iframe，但我寧願避免這種情況。

來源

2012-12-27 Sfisioza

顯示當前功能。 – epascarello

更容易奠定了所有一個div元素...像

CSS

.noclick { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 9999; /* or maybe higher */ 

    background-color: transparent; 
}

jQuery的

jQuery(document).ready(function() { 
    jQuery('body').append('<div class="noclick" />'); 
});

來源

2012-12-27 14:53:55 algorhythm

當用戶在頁面上標籤時會發生什麼？您仍然可以通過鍵盤導航點擊元素。 ;） – epascarello

一個很好的方式，我見過它完成了，並且自己完成它是使用一個模式'面具'覆蓋。

覆蓋整個頁面的灰色透明遮罩，除了與之交互的元素外，例如，模態彈出窗口。

還有一種方法是使用jQuery BlockUI plugin。

來源

2012-12-27 14:55:59

您可以將onclick重新分配給另一個屬性並重寫它。

一個實例元素

var btn = document.getElementById("button"); 
btn._onclick = btn.onclick; 
btn.onclick = function(){ return false; };

，當你想將它送回到原來的事件

var btn = document.getElementById("button"); 
if (btn._onclick) { 
    btn.onclick = btn._onclick; 
    btn._onclick = null; 
}

來源

2012-12-27 15:05:15 epascarello

這取決於你的onclick事件是否依賴的元素被點擊（即是否需要知道哪個元素被點擊）：

如果它是獨立的，那麼您可以添加一個事件處理程序到body元素或其他父級（因爲父事件最先被調用，然後是孩子，這是你想要的）：

$('body').click(function() { /* your code here */});

它是依賴於的元素，那麼你就可以訪問已被註冊在前面的onclick事件代碼「點擊」正在被點擊的元素的屬性，所以這樣的事情（可能是一個更具體一點與選擇）：

$('body *').each(function() { 
    var previousClick = this.click; 
    this.click = null; // remove previous 
    $(this).click(function() { /* your code here */}); 
    $(this).click(function() { previousClick();}); // run the code that was already there. 
})

來源

2012-12-27 15:57:30

一些修改algorhythm的答案。這個想法是通過透明元素「覆蓋」鏈接。您可以使用僞元素（例如：在之後）。

爲了防止「選項卡鍵」設置的tabindex：

<a href="..." tabindex="-1">

一類上點擊

馬克鏈接「已禁用」：

$('a').on('click', function(){ $(this).addClass('disabled') })

添加CSS：

a.disabled:after { position: absolute; content: ""; display: block; background: white; opacity: 0.5; // optional z-index: 999; left: 0; top: 0; bottom: 0; right: 0; }

$('a').on('click', function(){ $(this).addClass('disabled') });

a.disabled:after { 
 
    position: absolute; 
 
    content: ""; 
 
    display: block; 
 
    background: white; 
 
    opacity: 0.5; // optional 
 
    z-index: 999; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a hreh="#" tabindex="-1">The Link</a>

來源

2016-05-07 06:28:09

暫時禁用所有onclick事件並將其綁定回

回答

相關問題