如何使所有頁面元素不會對點擊產生反應

我試圖使用「選擇」功能進行擴展：讓用戶單擊頁面上的任何元素並查看它的xpath。如何使所有頁面元素不會對點擊產生反應

然而，使其可用我必須防止元素從點擊反應：我不想點擊超鏈接轉發我到另一頁，按鈕提交表單，等等等等

我會怎麼做？

UPD：我需要它僅適用於Chrome

來源

2013-06-22 izhak

您想支持哪些瀏覽器？您可以通過設置事件處理程序來輕鬆實現捕獲階段的偵聽，但在IE8及更低版本中不支持。 –

@FelixKling我只需要支持Chrome – izhak

在我看來，最乾淨的方法是將一個事件處理程序綁定到body在捕捉相和防止事件傳播/默認行爲。

你可以得到event.target一個參考點擊的元素：

document.body.addEventListener('click', function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    console.log(event.target); 
}, true);

的優點是，此事件處理程序將是第一個被觸發，無論哪個其他的事件處理程序綁定到元素該頁面（除非頁面綁定了一個類似的事件處理程序到body，但通常事件處理程序綁定在冒泡階段）。

欲瞭解更多信息，請參閱quirksmode.org - Event order和MDN - addEventListener。

DEMO

來源

2013-06-22 19:29:26

儘管這個解決方案是純js而不是jQuery，但它似乎是jQuery方式中最相關和最容易重寫的。謝謝。 – izhak

試試這個

$('body *').on('click',function(e){ 
    return false; 
});

來源

2013-06-22 19:26:04 JAVAGeek

你不是真正的Jon Skeet –

這個作品，謝謝！ – izhak

你假定jQuery可能不可用。 – 2013-06-22 19:30:49

對於一個CSS唯一的解決辦法：

* { 
    pointer-events: none; 
}

來源

2013-06-22 19:27:22 Havsmonstret

+1 Nice [tag：HTML5]解決方案 – mate64

'在非SVG元素的CSS中使用指針事件是實驗性的。 ' –

問題是如果設置此規則，是否會觸發擴展的事件處理程序。 –

在你click事件處理程序，確保你要麼調用preventDefault()在事件對象，或從您的函數返回false。例如：

function myClickHandler(e) { 
    e.preventDefault() // e is the event object 
    // Do your click stuff here 
    . 
    . 
    . 
    return false; // not required if you've called e.preventDefault() 
}

來源

2013-06-22 19:27:57

如何使所有頁面元素不會對點擊產生反應

回答

相關問題