今天在使用javascript編寫頁(yè)面時(shí)遇到了一個(gè)問題，就是click事件沒反應(yīng)。這個(gè)問題確實(shí)非常讓人困惑，我也遇到了類似的情況，最后還是找到了解決辦法，下面我就來(lái)分享一下我的經(jīng)驗(yàn)和教訓(xùn)。

通常情況下，我們使用javascript的click事件來(lái)處理一些點(diǎn)擊事件。比如，當(dāng)我們點(diǎn)擊一個(gè)按鈕時(shí)，我們可以通過(guò)click事件來(lái)處理這個(gè)點(diǎn)擊事件，在后續(xù)的代碼執(zhí)行過(guò)程中，我們可以改變某些元素的狀態(tài)、顯示一些內(nèi)容、或者是調(diào)用服務(wù)器接口等等。但是有時(shí)候我們按照這種方式寫代碼，卻沒有任何反應(yīng)，這是為什么呢？

// 按鈕點(diǎn)擊事件處理函數(shù)
document.getElementById('myButton').addEventListener('click', function(){
console.log('button clicked');
});

上面的代碼是一個(gè)簡(jiǎn)單的按鈕點(diǎn)擊事件處理函數(shù)，我們使用addEventListener來(lái)綁定click事件。當(dāng)我們點(diǎn)擊按鈕時(shí)，控制臺(tái)應(yīng)該會(huì)輸出 'button clicked' 這個(gè)信息，但是有時(shí)候卻沒有任何反應(yīng)。

這個(gè)問題的原因有很多種可能性，下面我簡(jiǎn)單介紹一些我遇到過(guò)的情況。

1.元素未找到或不存在

有時(shí)候我們?cè)谑褂胏lick事件時(shí)，使用的元素并不存在于頁(yè)面中，或者是我們的id或者class寫錯(cuò)了，這時(shí)候click事件就不會(huì)起作用。

// 錯(cuò)誤寫法：myButton的id值寫錯(cuò)了
// 正確的id是'myButton1'
document.getElementById('myButton').addEventListener('click', function(){
console.log('button clicked');
});

2.元素被其他元素遮擋住了

有時(shí)候我們的元素可能被其他元素遮擋住了，在這種情況下我們點(diǎn)擊的時(shí)候?qū)嶋H上是點(diǎn)擊了其他元素，而不是我們想要的元素。

// HTML代碼片段
<div>
<button id="myButton">Click Me</button>
<div style="background:#f00;width:100px;height:100px"></div>
</div>
// CSS代碼片段
div{
position:relative;
}

上面的代碼片段中，我們的button被一個(gè)紅色的div遮擋住了，如果我們點(diǎn)擊紅色的div，click事件并不會(huì)起作用。

3.事件被其它事件覆蓋了

有時(shí)候多個(gè)事件是同時(shí)執(zhí)行的，如果其中一個(gè)事件出現(xiàn)了問題，那么整個(gè)流程就會(huì)被打亂，造成click事件沒有被響應(yīng)。

// DOMContentLoaded事件和click事件同時(shí)綁定
document.addEventListener('DOMContentLoaded', function(){
console.log('DOMContentLoaded');
});
document.addEventListener('click', function(){
console.log('click');
});

上面的代碼中我們同時(shí)綁定了DOMContentLoaded和click事件，在HTML頁(yè)面加載完畢后應(yīng)該會(huì)先輸出 'DOMContentLoaded' 這個(gè)信息，然后我們點(diǎn)擊頁(yè)面上的其他元素應(yīng)該會(huì)輸出 'click' 這個(gè)信息。但是如果我們?cè)贒OMContentLoaded事件的處理函數(shù)中出現(xiàn)了錯(cuò)誤，那么click事件就無(wú)法正常響應(yīng)。

4.瀏覽器兼容性問題

不同的瀏覽器對(duì)JavaScript支持的程度是有所不同的，有些瀏覽器甚至對(duì)某些特定的事件支持不好。比如，IE瀏覽器對(duì)click事件的支持就不如其他瀏覽器那么好。

// oldIE瀏覽器使用click事件有兼容性問題
document.onclick = function(){
console.log('click');
}

上面的代碼中我們使用了onclick事件來(lái)處理點(diǎn)擊事件，眾所周知，IE瀏覽器對(duì)click事件支持不好，所以我們要盡可能使用addEventListener來(lái)綁定事件。

總結(jié)

由于問題比較復(fù)雜，我以上只是列舉了一些常見的原因，如果你還有其他的問題或者疑惑，可以在下方留言，我們一起來(lái)討論交流。

最后，希望這篇文章能夠幫助你解決一些click事件沒反應(yīng)的問題，也希望大家在使用JavaScript編寫代碼的時(shí)候要多加小心，盡可能的避免一些常見的問題。